闪亮tab中的选项卡的背景色

小编典典

闪亮tab中的选项卡的背景色

css

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

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

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

应用该代码会在tabsetPanel的整个过程中产生彩色背景，但是我仍然找不到一种修改方式来仅更改选项卡的背景。此外，我在.nav-tabs-customCSS中所做的任何更改似乎都不会产生任何影响。

我一直很想尝试将更改应用于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)

阅读 515

2020-05-16

共1个答案

小编典典

编辑：对于光泽版本> = 0.14，请参见此处。

如果您选择“活动”类的链接作为导航的直接后代，我认为您可以得到想要的。用户界面看起来像

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"
            )
        )
    )
)

2020-05-16