Wie kann ich Tab-Farben im tabPanel von Shiny anpassen?

Ändern der Hintergrundfarbe von Tabs im tabPanel von Shiny

Anpassungsherausforderung

Bei dieser Herausforderung wollen wir das Erscheinungsbild einer Shiny-Anwendung mithilfe von verbessern tabsetPanels. Unser Ziel ist es, eine Benutzeroberfläche zu erstellen, bei der das ausgewählte Bedienfeld einen weißen Text auf schwarzem Hintergrund aufweist, während die inaktiven Registerkarten einen weißen Hintergrund mit schwarzem Text beibehalten.

Codeausschnitt

Unten finden Sie den verwendeten Code Zur Veranschaulichung der Lösung:

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)

Lösungsübersicht

1. CSS-Anpassung: Wir verwenden CSS, um das Erscheinungsbild der Registerkarten zu ändern. Insbesondere zielen wir auf die Klasse .nav-tabs ab, um die Hintergrundfarbe auf Aqua und die Textfarbe auf Schwarz festzulegen. Darüber hinaus wenden wir Stile an, um die Hintergrund- und Rahmenfarben des aktiven Tabs zu ändern.
2. Farben: Der aktive Tab ist mit einem schwarzen Hintergrund und weißem Text gestaltet, während nicht aktive Tabs weiß angezeigt werden Hintergrund mit schwarzem Text.
3. Anpassbare Registerkarten: Wir weisen verschiedenen Registerkarten explizite Farben zu, wenn sie inaktiv sind, und behalten so die gewünschte visuelle Unterscheidung bei.

Ergebnis

Die Lösung bietet eine optisch ansprechende Anwendung, bei der die aktive Registerkarte mit einem schwarzen Hintergrund und weißem Text hervorgehoben wird. Die inaktiven Tabs bleiben durch ihren weißen Hintergrund und schwarzen Text gut erkennbar.

Hinweis zur kontinuierlichen Verfeinerung

Da Shiny CSS-Änderungen mit der Zeit dazu neigen, sich zu ändern, ist es wichtig, den Code entsprechend anzupassen. Die in dieser Lösung dargelegten Grundprinzipien sollten jedoch weiterhin den Anpassungsprozess leiten.

Das obige ist der detaillierte Inhalt vonWie kann ich Tab-Farben im tabPanel von Shiny anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!