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

Personnalisation de l'apparence des onglets dans Shiny tabPanel

Question :

Comment puis-je modifier la couleur d'arrière-plan et la couleur du texte des onglets dans un tabPanel brillant ? Plus précisément, je souhaite que le panneau sélectionné ait un fond noir avec du texte blanc, tandis que les onglets non sélectionnés doivent avoir un fond blanc avec du texte noir.

Solution :

Pour y parvenir Ceci, vous pouvez utiliser un style CSS personnalisé pour modifier l'apparence des onglets. Voici un exemple de code complet qui montre comment :

• Définir une couleur d'arrière-plan et de texte par défaut pour tous les onglets.
• Définir explicitement la couleur d'arrière-plan et de texte pour des onglets spécifiques lorsqu'ils ne le sont pas. actif.
• Modifiez la couleur de l'arrière-plan et du texte de l'onglet actif.

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>

Résultat :

Ce code générera une application brillante avec des onglets colorés. L'arrière-plan de l'onglet par défaut sera aqua avec du texte noir. L'onglet "t1" aura un fond rouge avec du texte blanc lorsqu'il n'est pas actif. Il en va de même pour « t2 » et « t3 » avec respectivement un fond bleu et vert. Lorsqu'un onglet est sélectionné, il aura un fond noir avec du texte blanc.

Remarques supplémentaires :

• Le CSS peut être personnalisé davantage pour ajuster l'apparence. des onglets selon les besoins.
• Le code devrait fonctionner avec la dernière version de Shiny. Cependant, s'il tombe en panne à l'avenir, vous devrez peut-être ajuster le CSS en fonction de la structure HTML et CSS mise à jour de Shiny.

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!