闪亮仪表板的标签框 CSS答案

【问题标题】：Tab Box CSS for shinydashboard闪亮仪表板的标签框 CSS
【发布时间】：2015-08-26 17:56:27
【问题描述】：

我正在尝试更改shinydashboard 中tabBox 的标签样式。我能够更改未选择选项卡的背景，但无法更改已选择选项卡的背景或每个选项卡中显示的文本。这是我添加到 custom.css 文件中以更改未选择的选项卡背景的内容：

.nav-tabs {
  background-color: #006747;
}

我尝试了.nav-tabs .active 之类的东西，但我什么都做不了。

另外，如果有人知道如何更改出现在您所选标签旁边的彩色小条，那也将不胜感激。

【问题讨论】：

我是 R 中的新手，因此在 Shiny 中，你如何添加 .nav-tabs？，我的意思是，我有类似 box(width =3,....) 之类的东西，我应该在哪个地方添加这个？
.nav-tabs 实际上不是 R 代码，它是我相信的 CSS，我不理解也几乎无法模仿。因为它不是 R 代码，所以您实际上并没有将它添加到您的 R 文件或任何函数中，例如 box。您必须创建一个 .css 文件并将其调用到您的应用程序中。我不确定如何为每个框元素进行自定义格式设置，因为我进行了全局更改。这是一个可以帮助您的网站http://shiny.rstudio.com/articles/css.html

标签： css r shiny shinydashboard

【解决方案1】：

开发人员工具和“检查元素”非常方便地找出您要更改 css 的类。

要更改所选标签的条子和颜色，您可以这样做：

.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;
}

这是一个示例（来自here 的主干代码）：

library(shiny)
library(shinydashboard)
body <- dashboardBody(
        fluidRow(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;
}"),
                tabBox(
                        title = "First tabBox",
                        # The id lets us use input$tabset1 on the server to find the current tab
                        id = "tabset1", height = "250px",
                        tabPanel("Tab1", "First tab content"),
                        tabPanel("Tab2", "Tab content 2")
                )

))

shinyApp(
        ui = dashboardPage(
                dashboardHeader(title = "tabBoxes"),
                dashboardSidebar(),
                body
        ),
        server = function(input, output) {
        }
)

【讨论】：

我公司的服务台实际上告诉了我同样的事情并引导我得到相同的答案，所以这是一个非常好的健全性检查。