Wie lege ich benutzerdefinierte Hintergrundfarben für Tabs in Shiny tabPanels fest?

Anpassen der Hintergrundfarbe von Tabs in Shiny tabPanel

Mit der CSS-Anpassung können Sie das Erscheinungsbild von Shiny-Anwendungen ändern, einschließlich der Hintergrundfarbe von Tabs in tabPanels.

Beispiel:

Erwägen Sie, die Tab-Farben in einem Shiny tabsetPanel anzupassen, um die Benutzeroberfläche zu verbessern. In diesem Beispiel wird der Standard-Tab-Hintergrund auf Aqua mit schwarzem Text gesetzt, während bestimmte Farben und Text auf ausgewählte Tabs angewendet werden.

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

Anpassung:

• Festlegen die Standard-Hintergrundfarbe für Registerkarten: .tabable > .nav > li > a
• Geben Sie eine benutzerdefinierte Hintergrund- und Textfarbe für eine bestimmte Registerkarte mit data-value an: .tabbable > .nav > li > a[data-value='t1']
• Ändern Sie den Hintergrund und die Textfarbe des aktiven Tabs: .tabbable > .nav > li[class=aktiv] > a

Dieses Beispiel bietet eine umfassende Lösung zum Anpassen der Hintergrundfarbe von Registerkarten in Shiny tabPanels und ermöglicht so ein vielseitiges Styling, um die visuelle Attraktivität Ihrer Anwendung zu verbessern.

Das obige ist der detaillierte Inhalt vonWie lege ich benutzerdefinierte Hintergrundfarben für Tabs in Shiny tabPanels fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!