0

我正在使用 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()

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

  1. 在 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()

  2. 将内容包装在 div() 中。

  3. 根据此答案使用 tagList() https://stackoverflow.com/a/32386689/5664232
4

1 回答 1

0

您的第二个代码块没有运行。你之前少了一个逗号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()
于 2016-10-18T08:00:41.827 回答