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

Anpassen der Tab-Darstellung im Shiny tabPanel

Frage:

Wie kann ich die Hintergrundfarbe und Textfarbe von Tabs ändern? in einem glänzenden TabPanel? Konkret möchte ich, dass das ausgewählte Bedienfeld einen schwarzen Hintergrund mit weißem Text hat, während nicht ausgewählte Registerkarten einen weißen Hintergrund mit schwarzem Text haben sollten.

Lösung:

Zu erreichen Dazu können Sie benutzerdefinierte CSS-Stile verwenden, um das Erscheinungsbild der Registerkarten zu ändern. Hier ist ein umfassendes Codebeispiel, das zeigt, wie Sie:

• eine Standardhintergrund- und Textfarbe für alle Registerkarten festlegen.
• die Hintergrund- und Textfarbe für bestimmte Registerkarten explizit festlegen, wenn dies nicht der Fall ist aktiv.
• Ändern Sie den Hintergrund und die Textfarbe des aktiven Tabs.

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>

Ergebnis:

Dieser Code generiert eine glänzende App mit farbigen Registerkarten. Der Standard-Tab-Hintergrund ist Aqua mit schwarzem Text. Die Registerkarte „t1“ hat einen roten Hintergrund mit weißem Text, wenn sie nicht aktiv ist. Gleiches gilt für „t2“ und „t3“ mit blauem bzw. grünem Hintergrund. Wenn eine Registerkarte ausgewählt ist, hat sie einen schwarzen Hintergrund mit weißem Text.

Zusätzliche Hinweise:

• Das CSS kann weiter angepasst werden, um das Erscheinungsbild anzupassen der Tabs nach Bedarf.
• Der Code sollte mit der neuesten Version von Shiny funktionieren. Sollte es jedoch in Zukunft zu Problemen kommen, müssen Sie möglicherweise das CSS entsprechend der aktualisierten HTML- und CSS-Struktur von Shiny anpassen.

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