光沢のあるタブ パネルの背景色をカスタマイズするにはどうすればよいですか?

Shiny タブ パネルの背景色のカスタマイズ

Shiny アプリケーションでは、タブ パネルを使用してコンテンツをさまざまなセクションに整理する便利な方法が提供されます。視覚的な魅力を高めるために、タブの背景色をカスタマイズすることができます。これは、CSS スタイルを使用して実現できます。

デフォルト スタイル

デフォルトでは、光沢のあるタブ パネルは、非アクティブなタブには明るい色の背景を使用し、アクティブなタブには暗い色の背景を使用します。 CSS セレクター .nav-tabs を使用して、アクティブなタブと非アクティブなタブの両方に背景色を適用できます。

例: 背景色のカスタマイズ

次のコード例は、その方法を示しています。アクティブなタブと非アクティブなタブの両方の背景色をカスタマイズするには:

<code class="r">ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs { background-color: #FF0000; } .nav-tabs li.active a { background-color: #0000FF; }"),
    tabsetPanel(
      tabPanel(title = "Hello"),
      tabPanel(title = "World")
    )
  )
)

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

shinyApp(ui, server)</code>

この例では、非アクティブなタブの背景色は赤になり、アクティブなタブの背景色は青になります。

個々のタブのカスタマイズ

タブの値に基づいて、個々のタブの背景色をカスタマイズすることもできます。これは、特定のタブ要素を対象とする CSS セレクターを使用して実現できます。

例: 個々のタブのカスタマイズ

次のコード例は、個々のタブの背景色をカスタマイズする方法を示しています。 :

<code class="r">ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs li a[data-value='t1'] { background-color: #FF0000; } .nav-tabs li a[data-value='t2'] { background-color: #0000FF; }"),
    tabsetPanel(
      tabPanel("t1", title = "Hello"),
      tabPanel("t2", title = "World")
    )
  )
)

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

shinyApp(ui, server)</code>

この例では、「Hello」タブの背景は赤、「World」タブの背景は青です。

以上が光沢のあるタブ パネルの背景色をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。