如何自定义闪亮选项卡面板的背景颜色？

自定义闪亮选项卡面板中的背景颜色

在闪亮应用程序中，选项卡面板提供了一种将内容组织到不同部分的便捷方法。为了增强视觉吸引力，您可能需要自定义选项卡的背景颜色。这可以使用 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中文网其他相关文章！