Comment personnaliser l'arrière-plan des onglets et les couleurs du texte dans Shiny tabPanel ?

Personnalisation de l'arrière-plan des onglets dans Shiny tabPanel

Problème :

Dans une application Shiny, vous souhaitez modifier l'arrière-plan couleurs et couleurs de texte des onglets d'un tabPanel, plus précisément :

• Lorsqu'un onglet est sélectionné, son arrière-plan doit devenir noir avec du texte blanc.
• Les onglets non sélectionnés doivent afficher un fond blanc avec du texte noir.

Solution :

Pour y parvenir, vous pouvez utiliser les styles CSS comme suit :

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

Explication :

Ce code CSS est implémenté comme suit :

• La classe .nav-tabs définit l'arrière-plan de tous les onglets sur du texte aqua et noir.
• Le .tabbable > .nav> li> une classe modifie la couleur d'arrière-plan et de texte de tous les onglets en noir et blanc, respectivement.
• Les .nav-tabs-custom .nav-tabs li.active : survolez un et .nav-tabs-custom .nav Les classes -tabs li.active a garantissent que l'arrière-plan de l'onglet actif reste transparent lors du survol ou du clic.
• La classe .nav-tabs-custom .nav-tabs li.active définit la couleur de la bordure supérieure de l'onglet actif en blanc.

Cette solution complète vous permet de personnaliser l'apparence des onglets dans un tabPanel brillant pour répondre à vos besoins spécifiques.

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!