光沢のあるタブパネルの背景色をカスタマイズするにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-10-24 08:19:02

オリジナル

1085 人が閲覧しました

How to Customize Background Colors of Shiny Tab Panels?

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 サイトの他の関連記事を参照してください。