加载屏幕和导航栏页面

Question

我试着像这个很好的例子一样制作一个加载屏幕 http://daattali.com:3838/loading-screen/。不幸的是，我无法弄清楚如何使用 'navbarPage' 实现完全相同的效果。

在下面这个稍微修改过的应用程序中，有两个选项卡面板，分别称为 "start" 和 "end"。当应用程序启动时，none 个选项卡面板处于活动状态。必须快速单击第一个选项卡才能看到加载屏幕，但这不是我想要的。有没有办法让它像上面提到的例子一样快速和简单？

感谢您的帮助！

library(shinyjs)

appCSS <- "
#loading-content {
position: absolute;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"

shinyApp(
  ui = navbarPage(
    useShinyjs(),
    inlineCSS(appCSS),

    tabPanel(title = "Start",

      # Loading message
      div(
        id = "loading-content",
        h2("Loading...")
      ),

      # The main app code goes here
      div(
        id = "app-content",
        p("This is a simple example of a Shiny app with a loading screen."),
        p("You can view the source code",
          tags$a(href = 'https://github.com/daattali/shiny-server/blob/master/loading-screen',
            "on GitHub")
        )
      )
    ),

    tabPanel(title = "End",
             h2("Second tab"))
  ),

  server = function(input, output, session) {
    # Simulate work being done for 1 second
    Sys.sleep(2)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")    
  }
)

编辑： 加载屏幕应用程序的原始 link 已被删除。现在可以在 github here

上访问

Answer 1

好吧，我相信您会喜欢这个解决方案，但它并不完美。关键是tagList，你可以在导航栏之前添加任何你想要的。

此外，我将填充添加到您的 CSS 代码中，现在导航栏中有一个标题。

不幸的是，navbarPage 无法通过不复杂的方式隐藏。

library(shiny)
library(shinyjs)

appCSS <- "
#loading-content {
position: absolute;
padding: 10% 0 0 0;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"

shinyApp(
  ui =
      tagList(
        useShinyjs(),
        inlineCSS(appCSS), 
      # Loading message
      div(
        id = "loading-content",
        h2("Loading...")
      ),
    navbarPage("Test",
    tabPanel(title = "Start",

             # The main app code goes here
             div(
               id = "app-content",
               p("This is a simple example of a Shiny app with a loading screen."),
               p("You can view the source code",
                 tags$a(href = 'https://github.com/daattali/shiny-server/blob/master/loading-screen',
                        "on GitHub")
               )
             )
    ),

    tabPanel(title = "End",
             h2("Second tab"))
    ) #close navbarPage
    ), #close tagList
  server = function(input, output, session) {
    # Simulate work being done for 1 second
    Sys.sleep(5)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")    
  }
)

加载屏幕和导航栏页面

Loading screen and navbarPage

r

shinyjs