How to Customize Background Colors of Shiny Tab Panels?

Customizing Background Colors in Shiny Tab Panels

In Shiny applications, tab panels provide a convenient way to organize content into different sections. To enhance the visual appeal, you may want to customize the background color of the tabs. This can be achieved using CSS styling.

Default Styling

By default, Shiny tab panels use light-colored backgrounds for inactive tabs and darker backgrounds for active tabs. The CSS selector .nav-tabs can be used to apply background colors to both active and inactive tabs.

Example: Customizing Background Color

The following code example demonstrates how to customize the background color of both active and inactive 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>

In this example, the inactive tabs have a red background color while the active tab has a blue background color.

Customizing Individual Tabs

You can also customize the background color of individual tabs based on their tab values. This can be achieved using CSS selectors that target specific tab elements.

Example: Customizing Individual Tabs

The following code example demonstrates how to customize the background color of individual tabs:

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

In this example, the "Hello" tab has a red background while the "World" tab has a blue background.

The above is the detailed content of How to Customize Background Colors of Shiny Tab Panels?. For more information, please follow other related articles on the PHP Chinese website!