R Shiny - 禁用选项卡/向选项卡添加文本答案

【问题标题】：Rshiny - Disabling tabs / adding text to tabsR Shiny - 禁用选项卡/向选项卡添加文本
【发布时间】：2017-04-06 02:50:32
【问题描述】：

我对闪亮的标签有疑问。我想创建一个带有两个选项卡的导航页面。对他们来说，我想插入一些用户的登录详细信息。没有选项“文本”或其他在 navbarPage 中插入文本。但我创建了一个附加选项卡：

library(shiny)
runApp(list(
    ui = navbarPage(
        title="My App",
        tabPanel("tab1 title"),
        tabPanel("tab2 title"),
        tabPanel("User: Madzia")),
    server = function(input, output) { }
))

这样没问题，但我不希望第三个标签是“可选择的”：我希望它被禁用，这样我们就不能点击它——就像在“我的应用程序”文本上一样。您对如何处理这个问题有任何想法吗？谢谢！最好的，马齐亚

【问题讨论】：

标签： r tabs shiny

【解决方案1】：

您可以使用一点点 javascript 来禁用选项卡。我在最近的博客文章中有一个如何隐藏选项卡（不禁用）的示例，您可以查看该 here 的代码。我修改了该代码以禁用它。

这段代码很老套，因为它在 2 分钟内完成，但适用于基本用例

library(shiny)
library(shinyjs)

jscode <- '
shinyjs.init = function() {
  $(".nav").on("click", ".disabled", function (e) {
    e.preventDefault();
    return false;
  });
}
'

css <- '
.disabled {
  background: #eee !important;
  cursor: default !important;
  color: black !important;
}
'

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    extendShinyjs(text = jscode, functions = "init"),
    tags$style(css),
    checkboxInput("foo", "Disable tab2", FALSE),
    tabsetPanel(
      id = "navbar",
      tabPanel(title = "tab1",
               value = "tab1",
               h1("Tab 1")
      ),
      tabPanel(title = "tab2",
               value = "tab2",
               h1("Tab 2")
      ),
      tabPanel(title = "tab3",
               value = "tab3",
               h1("Tab 3")
      )
    )
  ),
  server = function(input, output) {
    observe({
      toggleClass(condition = input$foo,
                  class = "disabled",
                  selector = "#navbar li a[data-value=tab2]")
    })
  }
)

编辑当我发布我的答案时，我没有完全阅读这个问题，我只是看到你想要一种禁用标签的方法，这就是我的答案。您的特定用例（创建一个仅显示用户名的选项卡）有点奇怪，但我想这仍然有效......

【讨论】：

嗨，院长！我认为 Madzia 想要的是导航菜单中的一些文本来显示登录信息。在引导程序中，这是使用<p class="navbar-text">Signed in as Madzia</p> 完成的......但不确定闪亮的正确方法是什么......
与this 问题类似，但使用文本而不是搜索框...
@ValterBeaković 您可以查看我的其他答案，以了解一种简单优雅的方式，无需用原始 HTML 重写整个导航栏。感谢您指出这一点
真的，真的很好。很高兴您也回答了另一个问题，因为建议的解决方案绝对是最好的。也许是用 navbarExtra() 函数扩展你的 shinyjs 的想法？
谢谢。我简要地考虑了这一点，但我只添加新功能，如果我认为它们对足够多的人有用，我只想用大量对少数人有用的功能来压倒这个包。所以希望这些 SO 线程将来能对人们有所帮助！

【解决方案2】：

我想保留我之前的答案，因为它可能对将来想知道如何禁用选项卡的人有用。

但是对于这个特定的问题，禁用选项卡不是正确的方法。将文本简单地添加到选项卡更有意义（正如 Valter 在评论中指出的那样）。如果您查看 bootstrap 的文档，它说您可以通过添加类为 navbar-text 的 html 元素将文本添加到导航栏中。我对 HTML 进行了一些试验，以确定需要在哪里完成这项工作，并创建了一个小函数，它将环绕 navbarPage() 以允许您向其中添加文本。

这是一个例子：

library(shiny)

navbarPageWithText <- function(..., text) {
  navbar <- navbarPage(...)
  textEl <- tags$p(class = "navbar-text", text)
  navbar[[3]][[1]]$children[[1]] <- htmltools::tagAppendChild(
    navbar[[3]][[1]]$children[[1]], textEl)
  navbar
}

ui <- navbarPageWithText(
  "Test app",
  tabPanel("tab1", "tab 1"),
  tabPanel("tab2", "tab 2"),
  text = "User: Dean"
)

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

shinyApp(ui = ui, server = server)

【讨论】：