闪亮选项卡中的选项卡的背景色 [英] Background color of tabs in shiny tabPanel

问题描述

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

I would like to customize a shiny application using tabsetPanels so that the selected panel appears in a black background with white text, and the unselected tabs show a white background with black text.

例如，在下面的应用程序，当选择了你好"标签时，我想你好"是在白色文本在黑色背景上.但是我仍然希望面板内容(输入字段)的背景保持白色.

For example, In the application below, when the "Hello" tab is selected, I would like "Hello" to be in white text on a black background. But I still want the background of the panel content (the input field) to remain white.

我能找到的最接近的东西来自这个问题:制表盒CSS Shinydashboard

The closest thing I've been able to find come from this question: Tab Box CSS for shinydashboard

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

Applying that code yields a colored background all the way across the tabsetPanel, but I still can't find a way to modify this to change the background of only the tabs. Furthermore, nothing I change in the .nav-tabs-custom css seems to take any effect whatsoever.

我一直很想尝试将更改应用于tab-pane标签CSS，但这会将更改推送到选项卡的正文中，而不是标题框中.

I'm continually tempted to try applying changes to the tab-pane tag CSS, but that pushes changes into the body of the tab, not the title box.

关于我可以进行哪些更改以使标题框更改背景颜色的任何想法?

Any ideas on what I could change to get the title boxes to change background color?

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)

推荐答案

对于闪亮版本> = 0.14，请参见此处.

for shiny versions >= 0.14 see here.

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

If you select the link with an 'active' class as an immediate descendant of the nav I think you can get what you're after. The UI would look like

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

这篇关于闪亮选项卡中的选项卡的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！