选项卡的背景颜色在发光的tabPanel
我想自定义一个闪亮的应用程序,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)
Mik*_*ise 15
上面的例子显然是破坏的(从版本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)
这是一个屏幕截图:
如果再次中断,并且必须调整代码,这里是生成此代码的当前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>
- 我只是系统地浏览了自0.13.0以来的所有版本（当前在生产环境中使用的版本）。整个13系列与@jenesalsquoi的答案一起使用，但是从14系列开始需要您的答案。您介意在答案中添加注释以表明这是0.14及更高版本的正确答案吗？ (2认同)
编辑:闪亮版> = 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"
)
)
)
)
- 这不再有效.似乎"tabs-above"类现在已将其名称更改为"tabbable" - 更改该类选择器会修复它. (2认同)