Shiny の tabPanel でタブの色をカスタマイズするにはどうすればよいですか?

Shiny の tabPanel のタブの背景色を変更する

カスタマイズ チャレンジ

このチャレンジでは、次を使用して Shiny アプリケーションの外観を向上させることを目的としています。タブセットパネル。選択したパネルには黒の背景に白のテキストが表示され、非アクティブなタブでは白の背景に黒のテキストが表示される UI を作成することを目指しています。

コード スニペット

以下は使用されるコードです。ソリューションを説明するには:

library(shiny)

ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs {
  background-color: #006747;
    }

.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"
      )
    )
  )
)

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


})

shinyApp(ui=ui, server=server)

ソリューションの内訳

1. CSS のカスタマイズ: CSS を利用してタブの外観を変更します。具体的には、.nav-tabs クラスをターゲットにして、背景色を水色、テキスト色を黒に設定します。さらに、スタイルを適用してアクティブなタブの背景と境界線の色を変更します。
2. 色: アクティブなタブは黒の背景と白のテキストでスタイル設定され、非アクティブなタブは白で表示されます。背景に黒のテキスト。
3. カスタマイズ可能なタブ: 非アクティブなさまざまなタブに明示的な色を割り当て、望ましい視覚的な区別を維持します。

結果

このソリューションは、アクティブなタブが黒の背景と白のテキストで強調表示される、視覚的に魅力的なアプリケーションを提供します。非アクティブなタブは、白い背景と黒いテキストで簡単に区別できます。

継続的な改良に関する注意

Shiny CSS の変更は時間の経過とともに発生する傾向があるため、それに応じてコードを適応させることが重要です。ただし、このソリューションで概説されている中心原則は、引き続きカスタマイズ プロセスの指針となるはずです。

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