Shiny tabPanels のタブにカスタム背景色を設定する方法

Shiny tabPanel のタブの背景色のカスタマイズ

CSS カスタマイズを使用すると、タブの背景色を含む Shiny アプリケーションの外観を変更できますtabPanels.

例:

ユーザー インターフェイスを強化するために、Shiny tabsetPanel のタブの色をカスタマイズすることを検討してください。この例では、デフォルトのタブの背景を水色と黒のテキストに設定し、選択したタブに特定の色とテキストを適用します。

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

カスタマイズ:

• 設定デフォルトのタブの背景色: .tabbable > .nav >リー＞ a
• データ値を使用して、特定のタブのカスタムの背景とテキストの色を指定します: .tabbable > .nav >リー＞ a[data-value='t1']
• アクティブなタブの背景とテキストの色を変更します: .tabbable > .nav > li[クラス=アクティブ] > a

この例は、Shiny tabPanels のタブの背景色をカスタマイズするための包括的なソリューションを提供し、アプリケーションの視覚的な魅力を高めるための多彩なスタイルを可能にします。

以上がShiny tabPanels のタブにカスタム背景色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。