Comment définir des couleurs d'arrière-plan personnalisées pour les onglets dans Shiny tabPanels ?

Personnalisation de la couleur d'arrière-plan des onglets dans Shiny tabPanel

La personnalisation CSS vous permet de modifier l'apparence des applications Shiny, y compris la couleur d'arrière-plan des onglets dans tabPanels.

Exemple :

Envisagez de personnaliser les couleurs des onglets dans un Shiny tabsetPanel pour améliorer l'interface utilisateur. Cet exemple définit l'arrière-plan par défaut des onglets sur aqua avec du texte noir, tout en appliquant des couleurs et du texte spécifiques aux onglets sélectionnés.

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

Personnalisation :

• Définir la couleur d'arrière-plan de l'onglet par défaut : .tabbable > .nav> li> a
• Spécifiez une couleur d'arrière-plan et de texte personnalisée pour un onglet particulier à l'aide de la valeur de données : .tabbable > .nav> li> a[data-value='t1']
• Modifier l'arrière-plan de l'onglet actif et la couleur du texte : .tabbable > .nav> li[class=active] > a

Cet exemple fournit une solution complète pour personnaliser la couleur d'arrière-plan des onglets dans Shiny tabPanels, permettant un style polyvalent pour améliorer l'attrait visuel de votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!