闪亮的 tabPanel 中选项卡的背景颜色答案

【问题标题】：Background color of tabs in shiny tabPanel闪亮的 tabPanel 中选项卡的背景颜色
【发布时间】：2016-05-03 16:24:07
【问题描述】：

我想使用tabsetPanels 自定义一个闪亮的应用程序，以便选定的面板显示为黑色背景和白色文本，而未选择的选项卡显示为白色背景和黑色文本。

例如，在下面的应用程序中，选择“Hello”选项卡时，我希望“Hello”在黑色背景上的白色文本。但我仍然希望面板内容（输入字段）的背景保持白色。

我能找到的最接近的东西来自这个问题：Tab Box CSS for shinydashboard

应用该代码会在整个 tabsetPanel 中产生一个彩色背景，但我仍然无法找到一种方法来修改它以仅更改选项卡的背景。此外，我在.nav-tabs-custom css 中所做的任何更改似乎都没有任何效果。

我一直很想尝试对 tab-pane 标签 CSS 进行更改，但这会将更改推送到选项卡的正文，而不是标题框。

关于我可以改变什么来让标题框改变背景颜色的任何想法？

ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs {
  background-color: #006747;
    }

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
background-color: transparent;
border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
    border-top-color: #FFF;
}"),
    tabsetPanel(
      tabPanel(
        title = "Hello",
        textInput(inputId = "text", label = "Input")
      ),
      tabPanel(
        title = "World"
      )
    )
  )
)

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


})

shinyApp(ui=ui, server=server)

【问题讨论】：

标签： css r shiny

【解决方案1】：

编辑：对于闪亮版本 >= 0.14，请参阅 here。

如果您选择具有“活动”类的链接作为导航的直接后代，我认为您可以获得您所追求的。用户界面看起来像

ui <- shinyUI(
    fluidPage(
        tags$style(HTML("
        .tabs-above > .nav > li[class=active] > a {
           background-color: #000;
           color: #FFF;
        }")),
        tabsetPanel(
            tabPanel(
                title = "Hello",
                textInput(inputId = "text", label = "Input")
            ),
            tabPanel(
                title = "World"
            )
        )
    )
)

【讨论】：

就是这样！为了我将来的参考，我可以使用.tabs-above > .nav > li > a 自定义未选择的选项卡。非常感谢。
非常感谢，我想为闪亮的仪表板做这件事，我要创建一个流体页面吗？
@DimitriPetrenko 我有一段时间没用过闪亮的东西了，你可能想问一个新问题
我找到了解决方案谢谢 :) 在 tabBox 参数中我们必须添加 value = pills
这不再有效。似乎“tabs-above”类现在已将其名称更改为“tabbable” - 更改该类选择器可以修复它。

【解决方案2】：

上面的例子显然被破坏了（从版本 0.14.0 开始），可能是由于一个闪亮的 css 更改。此外，帖子的标题比实际涵盖的实际问题和解决方案承诺的更多。所以我写了一个新的更全面的例子。

它将默认选项卡背景设置为浅绿色和黑色文本。
它将几个选项卡的颜色设置为带有白色文本的显式颜色（当它们不活动时）。
它将活动选项卡背景设置为黑色和白色文本。

从用户界面的角度来看，所有这些颜色是否都是一个好主意是另一个问题......

代码如下：

library(shiny)
ui <-shinyUI(fluidPage(
  h1("Colored Tabs"),
  tags$style(HTML("
    .tabbable > .nav > li > a                  {background-color: aqua;  color:black}
    .tabbable > .nav > li > a[data-value='t1'] {background-color: red;   color:white}
    .tabbable > .nav > li > a[data-value='t2'] {background-color: blue;  color:white}
    .tabbable > .nav > li > a[data-value='t3'] {background-color: green; color:white}
    .tabbable > .nav > li[class=active]    > a {background-color: black; color:white}
  ")),
  tabsetPanel(
    tabPanel("t0",h2("normal tab")),
    tabPanel("t1",h2("red tab")),
    tabPanel("t2",h2("blue tab")), 
    tabPanel("t3",h2("green tab")),
    tabPanel("t4",h2("normal tab")),
    tabPanel("t5",h2("normal tab"))
  )
))
server <- function(input, output) {}
shinyApp(ui=ui,server=server)

这是一个屏幕截图：

如果这再次中断，并且必须调整代码，这里是产生这个的当前 css/html：

<body>
  <div class="container-fluid">
    <h1>Colored Tabs</h1>
    <style>
    .tabbable > .nav > li > a                  {background-color: aqua;  color:black}
    .tabbable > .nav > li > a[data-value='t1'] {background-color: red;   color:white}
    .tabbable > .nav > li > a[data-value='t2'] {background-color: blue;  color:white}
    .tabbable > .nav > li > a[data-value='t3'] {background-color: green; color:white}
    .tabbable > .nav > li[class=active]    > a {background-color: black; color:white}
  </style>
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#tab-5851-1" data-toggle="tab" data-value="t0">t0</a>
        </li>
        <li>
          <a href="#tab-5851-2" data-toggle="tab" data-value="t1">t1</a>
        </li>
        <li>
          <a href="#tab-5851-3" data-toggle="tab" data-value="t2">t2</a>
        </li>
        <li>
          <a href="#tab-5851-4" data-toggle="tab" data-value="t3">t3</a>
        </li>
        <li>
          <a href="#tab-5851-5" data-toggle="tab" data-value="t4">t4</a>
        </li>
        <li>
          <a href="#tab-5851-6" data-toggle="tab" data-value="t5">t5</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" data-value="t0" id="tab-5851-1">
          <h2>normal tab</h2>
        </div>
        <div class="tab-pane" data-value="t1" id="tab-5851-2">
          <h2>red tab</h2>
        </div>
        <div class="tab-pane" data-value="t2" id="tab-5851-3">
          <h2>blue tab</h2>
        </div>
        <div class="tab-pane" data-value="t3" id="tab-5851-4">
          <h2>green tab</h2>
        </div>
        <div class="tab-pane" data-value="t4" id="tab-5851-5">
          <h2>normal tab</h2>
        </div>
        <div class="tab-pane" data-value="t5" id="tab-5851-6">
          <h2>normal tab</h2>
        </div>
      </div>
    </div>
  </div>
</body>

【讨论】：

你还记得这个改动是在哪个版本的闪亮中进行的吗？
真的不知道。现在看到 jenesalsquoi 的答案有多新，我想知道这是否就是全部。
我只是系统地浏览了自 0.13.0 以来的所有版本（我目前在生产环境中使用的版本）。整个 13 系列都与 @jenesalsquoi 的答案一起使用，但从 14 系列开始需要您的答案。您介意在您的答案中添加注释，说明这是 0.14 及更高版本的正确答案吗？
感谢您这样做。我查看了源代码，但无法弄清楚为什么它会改变，因为“tabable”已经存在多年了。
这是出于自私的动机。我将在几个月后更新我的库，我需要将这些更改包含在我的实施计划中。事实证明，这对我来说非常及时。我很高兴你遇到它。