自定义闪亮选项卡面板中的背景颜色
在闪亮应用程序中，选项卡面板提供了一种将内容组织到不同部分的便捷方法。为了增强视觉吸引力，您可能需要自定义选项卡的背景颜色。这可以使用 CSS 样式来实现。
默认样式
默认情况下，闪亮选项卡面板对非活动选项卡使用浅色背景，对活动选项卡使用深色背景。 CSS 选择器 .nav-tabs 可用于将背景颜色应用于活动和非活动选项卡。
示例：自定义背景颜色
以下代码示例演示了如何自定义活动和非活动选项卡的背景颜色：
<code class="r">ui <- shinyUI(
fluidPage(
tags$style(".nav-tabs { background-color: #FF0000; } .nav-tabs li.active a { background-color: #0000FF; }"),
tabsetPanel(
tabPanel(title = "Hello"),
tabPanel(title = "World")
)
)
)
server <- shinyServer(function(input, output) {})
shinyApp(ui, server)</code>在此示例中，非活动选项卡具有红色背景颜色，而活动选项卡具有蓝色背景颜色。
自定义各个选项卡
您还可以根据各个选项卡的选项卡值自定义各个选项卡的背景颜色。这可以使用针对特定选项卡元素的 CSS 选择器来实现。
示例：自定义各个选项卡
以下代码示例演示如何自定义各个选项卡的背景颜色:
<code class="r">ui <- shinyUI(
fluidPage(
tags$style(".nav-tabs li a[data-value='t1'] { background-color: #FF0000; } .nav-tabs li a[data-value='t2'] { background-color: #0000FF; }"),
tabsetPanel(
tabPanel("t1", title = "Hello"),
tabPanel("t2", title = "World")
)
)
)
server <- shinyServer(function(input, output) {})
shinyApp(ui, server)</code>在此示例中，“Hello”选项卡具有红色背景，而“World”选项卡具有蓝色背景。
以上是如何自定义闪亮选项卡面板的背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！
