如何自訂閃亮選項卡面板的背景顏色？

自訂閃亮選項卡面板中的背景顏色

在閃亮應用程式中，選項卡面板提供了一種將內容組織到不同部分的便捷方法。為了增強視覺吸引力，您可能需要自訂標籤的背景顏色。這可以使用 CSS 樣式來實現。

預設樣式

預設情況下，閃亮選項卡面板對非活動選項卡使用淺色背景，對活動選項卡使用深色背景。 CSS 選擇器 .nav-tabs 可用於將背景顏色套用至活動和非活動標籤。

範例：自訂背景顏色

以下程式碼範例示範如何自訂活動和非活動標籤的背景顏色：

<code class="r">ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs { background-color: #FF0000; } .nav-tabs li.active a { background-color: #0000FF; }"),
    tabsetPanel(
      tabPanel(title = "Hello"),
      tabPanel(title = "World")
    )
  )
)

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

shinyApp(ui, server)</code>

在此範例中，非活動標籤具有紅色背景顏色，而活動標籤具有藍色背景顏色。

自訂各個選項卡

您也可以根據各個選項卡的選項卡值自訂各個選項卡的背景顏色。這可以使用針對特定選項卡元素的 CSS 選擇器來實現。

範例：自訂各個選項卡

以下程式碼範例示範如何自訂個別標籤的背景顏色:

<code class="r">ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs li a[data-value='t1'] { background-color: #FF0000; } .nav-tabs li a[data-value='t2'] { background-color: #0000FF; }"),
    tabsetPanel(
      tabPanel("t1", title = "Hello"),
      tabPanel("t2", title = "World")
    )
  )
)

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

shinyApp(ui, server)</code>

在此範例中，「Hello」選項卡具有紅色背景，而「World」選項卡具有藍色背景。

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