Shiny tabPanel でタブの背景とテキストの色をカスタマイズする方法

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

問題:

Shiny アプリケーションで、背景を変更したいと考えています。 tabPanel 内のタブの色とテキストの色。具体的には次のとおりです。

• タブが選択されると、背景が黒になり、テキストが白になります。
• 選択されていないタブは、背景が白で表示されます。

解決策:

これを実現するには、次のように CSS スタイルを利用できます:

ui <- shinyUI(fluidPage(
  tags$style(".nav-tabs {
  background-color: aqua;  color:black}
.tabbable > .nav > li > a {
background-color: #006747;
color: white;
}
.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"
      )
    )
  )
)

説明:

この CSS コードは次のように実装されます:

• .nav-tabs クラスは、すべてのタブの背景を水色と黒のテキストに設定します。
• .tabbable > .nav >リー＞クラスは、すべてのタブの背景とテキストの色をそれぞれ黒と白に変更します。
• .nav-tabs-custom .nav-tabs li.active:hover a および .nav-tabs-custom .nav -tabs li.active クラスは、ホバーまたはクリックしている間、アクティブなタブの背景が透明のままであることを保証します。
• .nav-tabs-custom .nav-tabs li.active クラスは、境界線の上部の色を設定します。アクティブなタブが白になります。

この包括的なソリューションを使用すると、特定の要件に合わせて光沢のある tabPanel のタブの外観をカスタマイズできます。

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