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

Shiny tabPanel 中选项卡的背景自定义

问题：

在 Shiny 应用程序中，您希望修改背景tabPanel 中选项卡的颜色和文本颜色，具体为：

• 选择选项卡时，其背景应变为黑色并带有白色文本。
• 未选中的选项卡应显示白色背景黑色文本。

解决方案：

要实现此目的，您可以使用 CSS 样式，如下所示：

ui  .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 >力> a 类将所有选项卡的背景和文本颜色分别修改为黑色和白色。
• .nav-tabs-custom .nav-tabs li.active:hover a 和 .nav-tabs-custom .nav -tabs li.active a 类确保活动选项卡的背景在悬停或单击时保持透明。
• .nav-tabs-custom .nav-tabs li.active 类设置边框顶部颜色将活动选项卡设置为白色。

这个全面的解决方案允许您在闪亮的 tabPanel 中自定义选项卡的外观，以满足您的特定要求。

以上是如何在闪亮的 tabPanel 中自定义选项卡背景和文本颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！