自訂閃亮選項卡面板中的背景顏色
在閃亮應用程式中，選項卡面板提供了一種將內容組織到不同部分的便捷方法。為了增強視覺吸引力，您可能需要自訂標籤的背景顏色。這可以使用 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中文網其他相關文章！
