How to Customize Background and Text Colors of Tabs in Shiny tabPanel?

Customizing Tab Appearance in Shiny tabPanel

Question:

How can I modify the background color and text color of tabs in a shiny tabPanel? Specifically, I want the selected panel to have a black background with white text, while unselected tabs should have a white background with black text.

Solution:

To achieve this, you can use custom CSS styling to modify the appearance of the tabs. Here's a comprehensive code example that demonstrates how to:

• Set a default background and text color for all tabs.
• Explicitly set the background and text color for specific tabs when they are not active.
• Change the background and text color of the active tab.

Code:

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

Result:

This code will generate a shiny app with colored tabs. The default tab background will be aqua with black text. The "t1" tab will have a red background with white text when not active. The same applies to "t2" and "t3" with blue and green backgrounds, respectively. When a tab is selected, it will have a black background with white text.

Additional Notes:

• The CSS can be further customized to adjust the appearance of the tabs as needed.
• The code should work with the latest version of Shiny. However, if it breaks in the future, you may need to adjust the CSS according to the updated HTML and CSS structure of Shiny.

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