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

Shiny tabPanel でのタブの外観のカスタマイズ

質問:

タブの背景色とテキストの色を変更するにはどうすればよいですか?光沢のある tabPanel で?具体的には、選択したパネルには黒の背景に白のテキストを表示し、選択されていないタブには白の背景に黒のテキストを表示します。

解決策:

これにより、カスタム CSS スタイルを使用してタブの外観を変更できます。以下は、次の方法を示す包括的なコード例です。

• すべてのタブにデフォルトの背景色とテキスト色を設定します。
• 設定されていない場合に、特定のタブの背景色とテキスト色を明示的に設定します。 active.
• アクティブなタブの背景とテキストの色を変更します。

コード:

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

結果:

このコードは、色付きのタブを持つ光沢のあるアプリを生成します。デフォルトのタブの背景は水色に黒のテキストになります。 「t1」タブは、アクティブでない場合、背景が赤、文字が白になります。背景が青の「t2」と「t3」も同様です。タブを選択すると、黒い背景に白い文字が表示されます。

追加メモ:

• CSS をさらにカスタマイズして外観を調整できます。
• コードは Shiny の最新バージョンで動作するはずです。ただし、将来壊れた場合は、更新された Shiny の HTML と CSS 構造に応じて CSS を調整する必要がある可能性があります。

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