Shiny tabPanels のタブにカスタム背景色を設定する方法-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-10-24 08:13:30

オリジナル

606 人が閲覧しました

How to Set Custom Background Colors for Tabs in 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)

ログイン後にコピー

カスタマイズ: