How to Set Custom Background Colors for Tabs in Shiny tabPanels?

Customizing Background Color of Tabs in Shiny tabPanel

CSS customization allows you to modify the appearance of Shiny applications, including the background color of tabs in tabPanels.

Example:

Consider customizing the tab colors in a Shiny tabsetPanel to enhance the user interface. This example sets the default tab background to aqua with black text, while applying specific colors and text to selected tabs.

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

Customization:

• Set the default tab background color: .tabbable > .nav > li > a
• Specify a custom background and text color for a particular tab using data-value: .tabbable > .nav > li > a[data-value='t1']
• Modify the active tab background and text color: .tabbable > .nav > li[class=active] > a

This example provides a comprehensive solution to customize the background color of tabs in Shiny tabPanels, allowing for versatile styling to enhance the visual appeal of your application.

The above is the detailed content of How to Set Custom Background Colors for Tabs in Shiny tabPanels?. For more information, please follow other related articles on the PHP Chinese website!