Comment personnaliser les couleurs d'arrière-plan des panneaux d'onglets brillants ?

Personnalisation des couleurs d'arrière-plan dans les panneaux d'onglets Shiny

Dans les applications Shiny, les panneaux d'onglets offrent un moyen pratique d'organiser le contenu en différentes sections. Pour améliorer l'attrait visuel, vous souhaiterez peut-être personnaliser la couleur d'arrière-plan des onglets. Ceci peut être réalisé en utilisant le style CSS.

Style par défaut

Par défaut, les panneaux d'onglets Shiny utilisent des arrière-plans de couleur claire pour les onglets inactifs et des arrière-plans plus sombres pour les onglets actifs. Le sélecteur CSS .nav-tabs peut être utilisé pour appliquer des couleurs d'arrière-plan aux onglets actifs et inactifs.

Exemple : personnalisation de la couleur d'arrière-plan

L'exemple de code suivant montre comment pour personnaliser la couleur d'arrière-plan des onglets actifs et inactifs :

<code class="r">ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs { background-color: #FF0000; } .nav-tabs li.active a { background-color: #0000FF; }"),
    tabsetPanel(
      tabPanel(title = "Hello"),
      tabPanel(title = "World")
    )
  )
)

server <- shinyServer(function(input, output) {})

shinyApp(ui, server)</code>

Dans cet exemple, les onglets inactifs ont une couleur d'arrière-plan rouge tandis que l'onglet actif a une couleur d'arrière-plan bleue.

Personnalisation des onglets individuels

Vous pouvez également personnaliser la couleur d'arrière-plan des onglets individuels en fonction de leurs valeurs d'onglet. Ceci peut être réalisé à l'aide de sélecteurs CSS qui ciblent des éléments d'onglet spécifiques.

Exemple : personnalisation des onglets individuels

L'exemple de code suivant montre comment personnaliser la couleur d'arrière-plan des onglets individuels. :

<code class="r">ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs li a[data-value='t1'] { background-color: #FF0000; } .nav-tabs li a[data-value='t2'] { background-color: #0000FF; }"),
    tabsetPanel(
      tabPanel("t1", title = "Hello"),
      tabPanel("t2", title = "World")
    )
  )
)

server <- shinyServer(function(input, output) {})

shinyApp(ui, server)</code>

Dans cet exemple, l'onglet "Bonjour" a un fond rouge tandis que l'onglet "Monde" a un fond bleu.

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!