Comment personnaliser les couleurs des onglets dans le tabPanel de Shiny ?

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

Défi de personnalisation

Dans ce défi, nous visons à améliorer l'apparence d'une application Shiny en utilisant tabsetPanels. Notre objectif est de créer une interface utilisateur dans laquelle le panneau sélectionné présente un texte blanc sur fond noir, tandis que les onglets inactifs conservent un fond blanc avec du texte noir.

Extrait de code

Vous trouverez ci-dessous le code utilisé pour illustrer la solution :

library(shiny)

ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs {
  background-color: #006747;
    }

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

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


})

shinyApp(ui=ui, server=server)

Répartition de la solution

1. Personnalisation CSS : Nous utilisons CSS pour modifier l'apparence des onglets. Plus précisément, nous ciblons la classe .nav-tabs pour définir la couleur d'arrière-plan sur aqua et la couleur du texte sur noir. De plus, nous appliquons des styles pour modifier les couleurs d'arrière-plan et de bordure de l'onglet actif.
2. Couleurs : L'onglet actif est doté d'un arrière-plan noir et d'un texte blanc, tandis que les onglets non actifs affichent un style blanc. fond avec texte noir.
3. Onglets personnalisables : Nous attribuons des couleurs explicites aux différents onglets lorsqu'ils sont inactifs, en conservant la distinction visuelle souhaitée.

Résultat

La solution fournit une application visuellement attrayante où l'onglet actif est mis en évidence avec un fond noir et du texte blanc. Les onglets inactifs restent facilement reconnaissables avec leur fond blanc et leur texte noir.

Remarque sur le raffinement continu

Comme les modifications CSS Shiny sont susceptibles de se produire au fil du temps, il est important d'adapter le code en conséquence. Cependant, les principes fondamentaux décrits dans cette solution devraient continuer à guider le processus de personnalisation.

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!