闪亮：使用隐藏标签启动应用程序，没有延迟

Question

我想构建一个应用程序，并且某些选项卡将对用户隐藏，直到他输入正确的密码。我知道如何使用shinyjs::hideTab：

library(shiny);library(shinyjs)
ui <- fluidPage(useShinyjs(),
  navbarPage("hello", id="hello",
             tabPanel("home", br(), h3("this is home"),passwordInput("pass", "enter 'password' to see the tabs: "),actionButton("enter", "enter")),
             tabPanel("tab2", br(), h4("this is tab2")),
             tabPanel("tab3 with a lot of stuff in it", br(), h4("this is tab3"))))
server <- function(input, output, session) {
  hideTab("hello", "tab2"); hideTab("hello", "tab3 with a lot of stuff in it")
  observeEvent(input$enter, {
    if (input$pass == "password"){showTab("hello", "tab2"); showTab("hello", "tab3 with a lot of stuff in it")}})}
shinyApp(ui, server)

不过有一点“东西”。在我的应用程序中，隐藏的选项卡有很多东西，如小部件、uiOutputs、绘图、图像、global.R 中的文件读取等。结果是加载时间更长，并且在应用程序的这段加载时间内（之前hideTab 指令运行）用户实际上看到了隐藏的选项卡，甚至可以单击它们并查看里面的内容。它们会保持“可见”状态大约 1 秒钟，然后隐藏起来。

有没有办法在 UI 构建之前立即隐藏它们？我更喜欢一个解决方案，而不必将我所有的 ui 代码都放入 server.R 脚本中......

谢谢

Answer 1

您可以使用带有extendShinyjs() 的javascript 来隐藏页面加载时所需的标签：

Javascript 代码：

shinyjs.init = function(){
  $('#hello li a[data-value="tab3_val"]').hide();
  $('#hello li a[data-value="tab2_val"]').hide();
}

R 代码：

ui <- fluidPage(useShinyjs(),
                #Added this js
                extendShinyjs(script = path_to_javascript_file),
                navbarPage("hello", id="hello",
                           tabPanel("home", br(), h3("this is home"),passwordInput("pass", "enter 'password' to see the tabs: "),actionButton("enter", "enter")),
                           tabPanel("tab2", value = "tab2_val", br(), h4("this is tab2")),
                           tabPanel("tab3 with a lot of stuff in it", value = "tab3_val", br(), h4("this is tab3"))))

server <- function(input, output, session) {

  observeEvent(input$enter, {
    if (input$pass == "password"){
      show(selector = '#hello li a[data-value="tab3_val"]')
      show(selector = '#hello li a[data-value="tab2_val"]')
      }})}
shinyApp(ui, server)

---

另外，CSS 实际上并不太复杂。如果你想走这条路，你可以简单地将上面的 extendShinyjs() 调用替换为：

tags$head(tags$style(HTML("#hello li a[data-value = 'tab2_val'], #hello li a[data-value = 'tab3_val'] {
                             display: none;
 }")))

这样做的缺点是选项卡的格式在取消隐藏后似乎已关闭。

Answer 2

我会选择renderUI（请参阅@BertilBaron 的回答）或appendTab，因为在隐藏选项卡时很容易绕过密码：

这里是如何通过appendTab 实现所需的行为，避免上面的基本闪亮，没有额外的 JS：

library(shiny)

ui <- fluidPage(navbarPage("hello", id = "hello",
  tabPanel(
    "home",
    br(),
    h3("this is home"),
    passwordInput("pass", "enter 'password' to see the tabs: "),
    actionButton("enter", "enter")
  )
))

server <- function(input, output, session) {
  observeEvent(input$enter, {
    if (input$pass == "password") {
      appendTab(inputId = "hello", tab = tabPanel("tab2", value = "tab2_val", br(), h4("this is tab2")))
      appendTab(inputId = "hello", tab = tabPanel("tab3 with a lot of stuff in it",value = "tab3_val", br(), h4("this is tab3")))
    }
  })
}

shinyApp(ui, server)

Answer 3

这个怎么样

library(shiny);library(shinyjs)
ui <- fluidPage(useShinyjs(),
                navbarPage("hello", id="hello",
                           tabPanel("home", br(), h3("this is home"),passwordInput("pass", "enter 'password' to see the tabs: "),actionButton("enter", "enter")),
                           tabPanel("tab2",uiOutput("tab2Content")),
                           tabPanel("tab3 with a lot of stuff in it", uiOutput("tab3Content"))))
server <- function(input, output, session) {
  output$tab2Content <- renderUI({
    req(input$pass == "password")
    tagList(
      br(), 
      h4("this is tab2")
    )
  })
  output$tab3Content <- renderUI({
    req(input$pass == "password")
    tagList(
      br(), 
      h4("this is tab3")
    )
  })}
shinyApp(ui, server)

希望这会有所帮助！

Answer 4

我解决了这个问题，创建了一个新函数（在 UI 定义之上）以在右侧 li 标签中包含 style="display:none;：

tabsethidepanels<-function(tag, indexes = NULL) {
  if (class(tag) == "shiny.tag" && tag$name == "div" && tag$attribs$class == "tabbable") {
    if (is.null(indexes)) indexes<-seq_along(tag$children[[1]]$children[[1]])
    for (i in indexes) tag$children[[1]]$children[[1]][[i]]$attribs<-c(tag$children[[1]]$children[[1]][[i]]$attribs, list(style="display:none;"))
    tag
  } else stop("tag must be a tabsetPanel!", call. = F)
}

并相应地定义标签集：

tabsethidepanels(
  tabsetPanel(
    id = "mytab",
    selected = "tab7-not2hide",
    tabPanel("tab1"),
    tabPanel("tab2"),
    tabPanel("tab3"),
    tabPanel("tab4"),
    tabPanel("tab5"),
    tabPanel("tab6"),
    tabPanel("tab7-not2hide")
  ),
  indexes = 1:6
)

“索引”字段对于仅选择要隐藏的正确选项卡很有用：

<div class="tabbable">
  <ul class="nav nav-tabs shiny-tab-input" id="mytab" data-tabsetid="2818">
    <li style="display:none;">
      <a href="#tab-2818-1" data-toggle="tab" data-value="tab1">tab1</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-2" data-toggle="tab" data-value="tab2">tab2</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-3" data-toggle="tab" data-value="tab3">tab3</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-4" data-toggle="tab" data-value="tab4">tab4</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-5" data-toggle="tab" data-value="tab5">tab5</a>
    </li>
    <li style="display:none;">
      <a href="#tab-2818-6" data-toggle="tab" data-value="tab6">tab6</a>
    </li>
    <li class="active">
      <a href="#tab-2818-7" data-toggle="tab" data-value="tab7-not2hide">tab7-not2hide</a>
    </li>
  </ul>
  <div class="tab-content" data-tabsetid="2818">
    <div class="tab-pane" data-value="tab1" id="tab-2818-1"></div>
    <div class="tab-pane" data-value="tab2" id="tab-2818-2"></div>
    <div class="tab-pane" data-value="tab3" id="tab-2818-3"></div>
    <div class="tab-pane" data-value="tab4" id="tab-2818-4"></div>
    <div class="tab-pane" data-value="tab5" id="tab-2818-5"></div>
    <div class="tab-pane" data-value="tab6" id="tab-2818-6"></div>
    <div class="tab-pane active" data-value="tab7-not2hide" id="tab-2818-7"></div>
  </div>
</div>

记得选择一个标签，不要隐藏为活动的selected = "tab7-not2hide"。

如果您需要隐藏我建议创建“空白”tabPanel 的所有选项卡，请将其选择为活动的并隐藏所有索引 = NULL 的选项卡。