如何在Shiny的tabPanel中自定义选项卡颜色？

更改 Shiny 的 tabPanel 中选项卡的背景颜色

自定义挑战

在这个挑战中，我们的目标是使用以下方法来增强 Shiny 应用程序的外观tabsetPanels。我们的目标是创建一个 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. 可自定义选项卡：当各个选项卡处于非活动状态时，我们为它们指定明确的颜色，以保持所需的视觉区别。

结果

该解决方案提供了一个具有视觉吸引力的应用程序，其中活动选项卡以黑色背景和白色文本突出显示。非活动选项卡仍然可以通过白色背景和黑色文本轻松区分。

关于持续优化的注意事项

随着时间的推移，闪亮的 CSS 很容易发生变化，因此相应地调整代码非常重要。然而，该解决方案中概述的核心原则应继续指导定制过程。

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