如何在閃亮的 tabPanel 中自訂標籤背景和文字顏色？

Shiny tabPanel 中選項卡的背景自訂

問題：

在Shiny 應用程式中，您希望修改應用程式中，您希望修改背景tabPanel 中選項卡的顏色和文字顏色，具體為：

• 選擇選項卡時，其背景應變為黑色並帶有白色文字。
• 未選取的選項卡應顯示白色背景黑色文字。

解決方案：

要實現此目的，您可以使用CSS 樣式，如下所示：

ui <- shinyUI(fluidPage(
  tags$style(".nav-tabs {
  background-color: aqua;  color:black}
.tabbable > .nav > li > a {
background-color: #006747;
color: white;
}
.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"
      )
    )
  )
)

說明：

此CSS 程式碼實作如下：

• .nav-tabs 類別將所有選項卡的背景設定為淺綠色和黑色文字。
• .tabbable> .nav >力> a 類別將所有選項卡的背景和文字顏色分別修改為黑色和白色。
• .nav-tabs-custom .nav-tabs li.active:hover a 和.nav-tabs-custom .nav -tabs li.active a 類別確保活動標籤的背景在懸停或點擊時保持透明。
• .nav-tabs-custom .nav-tabs li.active 類別設定邊框頂部顏色將活動標籤設為白色。

這個全面的解決方案可讓您在閃亮的 tabPanel 中自訂標籤的外觀，以滿足您的特定要求。

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