如何在Shiny的tabPanel中自訂選項卡顏色？

更改Shiny 的tabPanel 中選項卡的背景顏色

自訂挑戰

在這個挑戰中，我們的目標是使用以下方法來增強Shiny 應用程式的外觀tabsetPanels。我們的目標是創建一個 UI，其中所選面板在黑色背景上具有白色文本，而非活動選項卡則保持白色背景和黑色文本。

程式碼片段

以下是使用的程式碼說明解決方案：

library(shiny)

ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs {
  background-color: #006747;
    }

.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"
      )
    )
  )
)

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


})

shinyApp(ui=ui, server=server)

解決方案分解

1. CSS 自訂： 我們利用CSS 來修改選項卡的外觀。具體來說，我們以 .nav-tabs 類別為目標，將背景顏色設為淺綠色，文字顏色設為黑色。此外，我們應用樣式來更改活動標籤的背景和邊框顏色。
2. 顏色：活動選項卡的樣式為黑色背景和白色文本，而非活動選項卡則顯示白色背景為黑色文本。
3. 可自訂選項卡：當個別選項卡處於非活動狀態時，我們為它們指定明確的顏色，以保持所需的視覺區別。

結果

該解決方案提供了一個具有視覺吸引力的應用程序，其中活動選項卡以黑色背景和白色文字突出顯示。非活動選項卡仍然可以透過白色背景和黑色文字輕鬆區分。

關於持續優化的注意事項

隨著時間的推移，閃亮的 CSS 很容易發生變化，因此相應地調整程式碼非常重要。然而，該解決方案中概述的核心原則應繼續指導客製化流程。

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