Css 闪亮选项卡面板中选项卡的背景色_Css_R_Shiny

Css 闪亮选项卡面板中选项卡的背景色

css r shiny

Css 闪亮选项卡面板中选项卡的背景色,css,r,shiny,Css,R,Shiny,我想使用tabsetPanels自定义一个闪亮的应用程序，这样选定的面板显示在带有白色文本的黑色背景中，而未选定的选项卡显示带有黑色文本的白色背景例如，在下面的应用程序中，当选择“Hello”选项卡时，我希望“Hello”是黑色背景上的白色文本。但我仍然希望面板内容（输入字段）的背景保持白色我能找到的最接近的东西来自这个问题：应用该代码可以在整个tabsetPanel中生成彩色背景，但我仍然找不到修改该代码以仅更改选项卡的背景的方法。此外，我在.nav tabs customcss中所做的

我想使用

tabsetPanels

自定义一个闪亮的应用程序，这样选定的面板显示在带有白色文本的黑色背景中，而未选定的选项卡显示带有黑色文本的白色背景

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

我能找到的最接近的东西来自这个问题：

应用该代码可以在整个tabsetPanel中生成彩色背景，但我仍然找不到修改该代码以仅更改选项卡的背景的方法。此外，我在

.nav tabs custom

css中所做的任何更改似乎都不会产生任何效果

我不断尝试将更改应用于

选项卡窗格

标记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)

uiEDIT:有关闪亮版本>=0.14的信息，请参阅
如果你选择一个带有“活动”类的链接作为nav的直接后代，我想你可以得到你想要的。用户界面看起来像
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"
            )
        )
    )
)

uiEDIT:有关闪亮版本>=0.14的信息，请参阅
如果你选择一个带有“活动”类的链接作为nav的直接后代，我想你可以得到你想要的。用户界面看起来像
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"
            )
        )
    )
)

ui上面的示例显然已被破坏（从0.14.0版开始），可能是由于css发生了变化。此外，这篇文章的标题承诺了比实际涉及的问题和解决方案更多的内容。所以我写了一个新的更全面的例子

它将默认选项卡背景设置为浅绿色和黑色文本
它将多个选项卡的颜色设置为带有白色文本的显式颜色（当它们未处于活动状态时）
它将活动选项卡背景设置为带白色文本的黑色

从UI的角度来看，所有这些颜色是否都是一个好主意是另一个问题
代码如下：
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)

库（闪亮）
ui li>a{背景色：浅绿色；颜色：黑色}
.tabbable>.nav>li>a[data value='t1']{背景色：红色；颜色：白色}
.tabbable>.nav>li>a[data value='t2']{背景色：蓝色；颜色：白色}
.tabbable>.nav>li>a[data value='t3']{背景色：绿色；颜色：白色}
.tabbable>.nav>li[class=active]>a{背景色：黑色；颜色：白色}














普通选项卡
红色标签
蓝色标签
绿色标签
普通选项卡
普通选项卡
上面的示例显然已被破坏（从0.14.0版开始），可能是因为css发生了变化。此外，这篇文章的标题承诺了比实际涉及的问题和解决方案更多的内容。所以我写了一个新的更全面的例子

它将默认选项卡背景设置为浅绿色和黑色文本
它将多个选项卡的颜色设置为带有白色文本的显式颜色（当它们未处于活动状态时）
它将活动选项卡背景设置为带白色文本的黑色

从UI的角度来看，所有这些颜色是否都是一个好主意是另一个问题
代码如下：
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)

库（闪亮）
ui li>a{背景色：浅绿色；颜色：黑色}
.tabbable>.nav>li>a[data value='t1']{背景色：红色；颜色：白色}
.tabbable>.nav>li>a[data value='t2']{背景色：蓝色；颜色：白色}
.tabbable>.nav>li>a[data value='t3']{背景色：绿色；颜色：白色}
.tabbable>.nav>li[class=active]>a{背景色：黑色；颜色：白色}














普通选项卡
红色标签
蓝色标签
绿色标签
普通选项卡
普通选项卡
就是这样！为了将来参考，我可以使用.tabs over>.nav>li>a
自定义未选择的选项卡。非常感谢。非常有用。我想为shinydashboard做这件事。我要创建fluidpage吗？@DimitriPetrenko我已经有一段时间没有使用Shinyd了，你可能想问一个新问题。我找到了解决方案。谢谢：）在tabBox参数中，我们必须添加value=pills
这不再有效。似乎“tabs above”类现在已经将其名称更改为“tabbable”-更改该类选择器可以修复它。就是这样！为了将来参考，我可以使用.tabs over>.nav>li>a
自定义未选择的选项卡。非常感谢。非常有用。我想为shinydashboard做这件事。我要创建fluidpage吗？@DimitriPetrenko我已经有一段时间没有使用Shinyd了，你可能想问一个新问题。我找到了解决方案。谢谢：）在tabBox参数中，我们必须添加value=pills
这不再有效。似乎“tabs above”类现在已将其名称更改为“tabbable”-更改该类选择器将修复它。您是否记得此更改是在哪个版本中进行的？真的不知道。现在看看jenesalsqu