如何在闪亮的选项卡面板中为选项卡设置自定义背景颜色？

自定义 Shiny tabPanel 中选项卡的背景颜色

CSS 自定义允许您修改 Shiny 应用程序的外观，包括选项卡的背景颜色

示例：

考虑在 Shiny tabsetPanel 中自定义选项卡颜色以增强用户界面。此示例将默认选项卡背景设置为带有黑色文本的浅绿色，同时将特定颜色和文本应用于所选选项卡。

<code class="r">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)</code>

自定义：

• 设置默认选项卡背景颜色： .tabbable > .nav >力> a
• 使用数据值指定特定选项卡的自定义背景和文本颜色： .tabbable > .nav >力> a[data-value='t1']
• 修改活动选项卡背景和文本颜色：.tabbable > .nav > li[类=活动]> a

此示例提供了一个全面的解决方案来自定义闪亮选项卡面板中选项卡的背景颜色，允许多种样式来增强应用程序的视觉吸引力。

以上是如何在闪亮的选项卡面板中为选项卡设置自定义背景颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！