Wie kann ich Tab-Hintergrund- und Textfarben in Shiny tabPanel anpassen?

Hintergrundanpassung von Tabs in Shiny tabPanel

Problem:

In einer Shiny-Anwendung möchten Sie den Hintergrund ändern Farben und Textfarben der Registerkarten in einem tabPanel, insbesondere:

• Wenn eine Registerkarte ausgewählt ist, sollte ihr Hintergrund schwarz mit weißem Text werden.
• Nicht ausgewählte Registerkarten sollten einen weißen Hintergrund anzeigen mit schwarzem Text.

Lösung:

Um dies zu erreichen, können Sie CSS-Stile wie folgt verwenden:

ui <- shinyUI(fluidPage(
  tags$style(".nav-tabs {
  background-color: aqua;  color:black}
.tabbable > .nav > li > a {
background-color: #006747;
color: white;
}
.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
background-color: transparent;
border-color: transparent;
}
.nav-tabs-custom .nav-tabs li.active {
    border-top-color: #FFF;
}"),
    tabsetPanel(
      tabPanel(
        title = "Hello",
        textInput(inputId = "text", label = "Input")
      ),
      tabPanel(
        title = "World"
      )
    )
  )
)

Erklärung:

Dieser CSS-Code ist wie folgt implementiert:

• Die Klasse .nav-tabs setzt den Hintergrund aller Tabs auf aquamarinen und schwarzen Text.
• Die .tabbable > .nav > li > Eine Klasse ändert die Hintergrund- und Textfarbe aller Registerkarten in Schwarz bzw. Weiß.
• Die .nav-tabs-custom .nav-tabs li.active:hover a und .nav-tabs-custom .nav -tabs li.active a-Klassen sorgen dafür, dass der Hintergrund der aktiven Registerkarte beim Bewegen oder Klicken transparent bleibt.
• Die .nav-tabs-custom .nav-tabs li.active-Klasse legt die Randfarbe von fest die aktive Registerkarte weiß.

Mit dieser umfassenden Lösung können Sie das Erscheinungsbild von Registerkarten in einem glänzenden TabPanel an Ihre spezifischen Anforderungen anpassen.

Das obige ist der detaillierte Inhalt vonWie kann ich Tab-Hintergrund- und Textfarben in Shiny tabPanel anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!