Question

我正在使用miniUI构建一个闪亮的小工具。我希望在小工具完成一些准备工作时显示加载屏幕，并尝试实施这个简单方便的解决方案：https://github.com/daattali/advanced-shiny/blob/master/loading-screen/app.R

以下是小工具外观的一个小例子：

library(shiny)
library(shinyjs)
library(miniUI)

sampleApp <- function() {
  ui <- miniPage(
    gadgetTitleBar("Sample App"),
    miniTabstripPanel(
      miniTabPanel(
        "Panel 1",
        fillCol(div("Content of Panel 1"))
      ),
      miniTabPanel(
        "Panel 2",
        fillCol(div("Content of Panel 2"))
      ),
      between = p("") # Needed later on to avoid error in shinyjs::hidden()
    )
  )

  server <- function(input, output) {
  }

  runGadget(ui, server, viewer = dialogViewer("Sample dialog"))
}
sampleApp()

我尝试了几种方法来调整加载屏幕代码到我的示例。我似乎无法隐藏内容：

在miniTabstripPanel（）周围放置hidden（）：

library(shiny)
library(shinyjs)
library(miniUI)

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

sampleApp <- function() {
ui <- miniPage(
  useShinyjs(),
  inlineCSS(appCSS),

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

  # The main app code goes here
  gadgetTitleBar("AppTitle"),
  hidden(
    miniTabstripPanel(
      miniTabPanel(
        "Panel 1",
        fillCol(div("Content of Panel 1"))
      ),
      miniTabPanel(
        "Panel 2",
        fillCol(div("Content of Panel 2"))
      ),
      between = p("") # Needed later on to avoid error in shinyjs::hidden()
    ),
    id = "app-content"
  )
)
server <- function(input, output) {
  # Simulate work being done for 1 second
  Sys.sleep(1)

  # Hide the loading message when the rest of the server function has executed
  hide(id = "loading-content", anim = TRUE, animType = "fade")
  show("app-content")
}
 runGadget(ui, server, viewer = dialogViewer("Sample dialog"))
}
sampleApp()

在div（）中包装内容。
根据此答案https://stackoverflow.com/a/32386689/5664232

Answer 1

您的第二段代码无法运行。您在between = p("")之前缺少逗号。

此代码适用于显示加载屏幕并将其淡出，它唯一不做的事情也是最初隐藏内容。它看起来像miniUI tabsetpanel真的不喜欢在任何其他div或元素内，所以我只是让它。 miniUI确实有很多错误，并且比常规闪亮的UI更难处理，这只是我们在构建小工具时不得不处理的一个怪癖。部分原因是因为miniUI使用不同的CSS系统（弹性框），但无论如何，这段代码可以在不隐藏内容的情况下工作：

library(shiny)
library(shinyjs)
library(miniUI)

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

sampleApp <- function() {
  ui <- miniPage(
    useShinyjs(),
    inlineCSS(appCSS),

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

    # The main app code goes here
    gadgetTitleBar("AppTitle"),
    miniTabstripPanel(
      miniTabPanel(
        "Panel 1",
        fillCol(div("Content of Panel 1"))
      ),
      miniTabPanel(
        "Panel 2",
        fillCol(div("Content of Panel 2"))
      ),
      between = p("") # Needed later on to avoid error in shinyjs::hidden()
    )
  )
  server <- function(input, output) {
    # Simulate work being done for 1 second
    Sys.sleep(1)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")
  }
  runGadget(ui, server, viewer = dialogViewer("Sample dialog"))
}
sampleApp()

如果你真的想要隐藏UI中的内容然后显示它，我相信它可以通过一些解决方法来完成但是它可能需要一些时间来调试它而我现在没有那么多时间所以我我们只会向您展示一个类似的不太理想的解决方法：在服务器处于活动状态时立即隐藏选项卡和面板内容，并在最后显示它们。它不是那么好，因为它们不会被隐藏起来，但它是我能在2分钟内完成的最好的。

library(shiny)
library(shinyjs)
library(miniUI)

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

sampleApp <- function() {
  ui <- miniPage(
    useShinyjs(),
    inlineCSS(appCSS),

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

    # The main app code goes here
    gadgetTitleBar("AppTitle"),
    miniTabstripPanel(
      miniTabPanel(
        "Panel 1",
        fillCol(div("Content of Panel 1"))
      ),
      miniTabPanel(
        "Panel 2",
        fillCol(div("Content of Panel 2"))
      ),
      between = p("") # Needed later on to avoid error in shinyjs::hidden()
    )
  )
  server <- function(input, output) {
    hide(selector = ".gadget-tabs-content-container, .gadget-tabs-container")

    # Simulate work being done for 1 second
    Sys.sleep(1)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")
    show(selector = ".gadget-tabs-content-container, .gadget-tabs-container")
  }
  runGadget(ui, server, viewer = dialogViewer("Sample dialog"))
}
sampleApp()

使用miniUI在闪亮的小工具上加载屏幕

1 个答案: