如何在閃亮的選項卡面板中為選項卡設定自訂背景顏色？

自訂Shiny tabPanel 中選項卡的背景顏色

CSS 自訂可讓您修改Shiny 應用程式的外觀，包括選項卡的背景顏色

範例：

考慮在Shiny tabsetPanel 中自訂選項卡顏色以增強使用者介面。此範例將預設選項卡背景設定為帶有黑色文字的淺綠色，同時將特定顏色和文字套用至所選選項卡。

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

自訂：

• 設定預設標籤背景顏色： .tabbable > .nav >力> a
• 使用資料值指定特定選項卡的自訂背景和文字顏色： .tabbable > .nav >力> a[data-value='t1']
• 修改活動標籤背景和文字顏色：.tabbable > .nav > li[類別=活動]> a

此範例提供了一個全面的解決方案來自訂閃亮選項卡面板中選項卡的背景顏色，允許​​多種樣式來增強應用程式的視覺吸引力。

以上是如何在閃亮的選項卡面板中為選項卡設定自訂背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！