Question

我尝试制作一个加载屏幕，就像这个很好的例子http://daattali.com:3838/loading-screen/一样。不幸的是，我无法弄清楚如何使用＆＃39; navbarPage＆＃39;来完成相同的效果。

在下面稍微修改过的应用程序中，有两个标签面板，名为＆＃34; start＆＃34;和＆＃34;结束＆＃34;。应用程序启动时，没有任何选项卡面板处于活动状态。一个人必须快速点击第一个标签才能看到加载屏幕，但这不是我想要的。有没有办法让它像上面提到的例子那样快速简单？

感谢您的帮助！

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")    
  }
)

编辑：加载屏幕应用的原始链接已被删除。现在可以在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")    
  }
)

加载屏幕和navbarPage

1 个答案: