css - 调整 Shiny 进度条的大小并将其居中

Question

我正在使用一个 Shiny 的应用程序，我需要计算进程，在执行计算进度时，我使用 progressBar 来显示进程。

问题是进度条太小，而且我不喜欢显示的方式。

所以，我在想也许有一种方法可以使用 Shiny 的模态来实现进度条(有一个名为 modalDialog 的函数)。

我的想法是，当用户运行计算时，将打开一个模式，显示 progressBar。

这是进度代码:

withProgress(message = 'Runing GSVA', value = 0, {
    incProgress(1, detail = "This may take a while...")
    functionToGenerate()
  })

有什么想法吗？

Answer 1

我建议自定义通知的 CSS 类:如果您检查通知程序的元素，您会发现它具有“shiny-notification”类。因此，您可以使用 tags$style() 覆盖该类的一些属性。在下面的示例中(对于模板:请参阅？withProgress)，我决定调整高度+宽度以使其更大，并调整顶部+左侧以使其居中。

ui <- fluidPage(
  tags$head(
    tags$style(
      HTML(".shiny-notification {
              height: 100px;
              width: 800px;
              position:fixed;
              top: calc(50% - 50px);;
              left: calc(50% - 400px);;
            }
           "
      )
    )
  ),
  plotOutput("plot")
)

server <- function(input, output) {
  output$plot <- renderPlot({
    withProgress(message = 'Calculation in progress',
                 detail = 'This may take a while...', value = 0, {
                   for (i in 1:15) {
                     incProgress(1/15)
                     Sys.sleep(0.25)
                   }
                 })
    plot(cars)
  })
}

runApp(shinyApp(ui, server), launch.browser = TRUE)