如何在Shiny tabPanel中自定义选项卡的背景和文本颜色？

在 Shiny tabPanel 中自定义选项卡外观

问题：

如何修改选项卡的背景颜色和文本颜色在闪亮的选项卡面板中？具体来说，我希望选定的面板具有黑色背景和白色文本，而未选定的选项卡应具有白色背景和黑色文本。

解决方案：

实现此时，您可以使用自定义 CSS 样式来修改选项卡的外观。这是一个全面的代码示例，演示了如何：

• 为所有选项卡设置默认背景和文本颜色。
• 显式设置特定选项卡的背景和文本颜色（当它们不是时）活动。
• 更改活动选项卡的背景和文本颜色。

代码：

<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中文网其他相关文章！