4

この素敵な例http://daattali.com:3838/loading-screen/のように読み込み画面を作成しようとしています。残念ながら、「navbarPage」でまったく同じ効果を得る方法がわかりません。

以下のわずかに変更されたアプリには、「開始」と「終了」という 2 つのタブ パネルがあります。アプリの起動時に、アクティブなタブ パネルはありません。ロード画面を見るには、最初のタブをすばやくクリックする必要がありますが、これは私が望むものではありません。上記の例のようにすばやく簡単にする方法はありますか?

お手伝いありがとう！

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 でアクセスできるようになりました

4

1 に答える 1

5

このソリューションを楽しんでいただけると思いますが、完璧ではありません。重要なのは tagList です。navbar の前に好きなものを追加できます。

さらに、CSS コードにパディングを追加すると、navbar にタイトルが表示されます。

残念ながら、複雑ではない方法で 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")    
  }
)
于 2015-09-03T22:56:53.873 に答える