如何在Shiny tabPanel中自訂選項卡的背景和文字顏色？

在Shiny tabPanel 中自訂選項卡外觀

問題：

如何修改選項卡的背景顏色和文字顏色在閃亮的選項卡面板中？具體來說，我希望選定的面板具有黑色背景和白色文本，而未選定的選項卡應具有白色背景和黑色文字。

解決方案：

實現此時，您可以使用自訂 CSS 樣式來修改標籤的外觀。這是一個全面的程式碼範例，示範如何：

• 為所有標籤設定預設背景和文字顏色。
• 明確設定特定選項卡的背景和文字顏色（當它們不是時）活動。
• 更改活動標籤的背景和文字顏色。

代碼：

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

結果：

此代碼將產生一個帶有彩色選項卡的閃亮應用程式。預設選項卡背景將為淺綠色並帶有黑色文字。 “t1”選項卡在不活動時將具有紅色背景和白色文字。這同樣適用於分別具有藍色和綠色背景的“t2”和“t3”。當選擇選項卡時，它將具有黑色背景和白色文字。

附加說明：

• CSS 可以進一步自訂以調整外觀根據需要添加選項卡。
• 程式碼應適用於最新版本的 Shiny。但是，如果將來出現問題，您可能需要根據 Shiny 更新的 HTML 和 CSS 結構來調整 CSS。

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