shinydashboard的选项卡框CSS [英] Tab Box CSS for shinydashboard

问题描述

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

I'm trying to change the tab style for tabBox in shinydashboard. I was able to change the background of the tabs that aren't selected, but I can't change the background of the tab that is selected or the text that appears in each tab. This is what I added to a custom.css file to change the unselected tab backgrounds:

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

我尝试过像 .nav-tabs .active

I tried stuff like .nav-tabs .active but I couldn't get anything to work.

此外，如果任何人知道如何更改选定标签旁边的小色条，

Also if anybody knows how to change the small colored sliver that appears next to your selected tab, that would be appreciated also.

推荐答案

开发工具和检查元素非常方便找出哪些类css。

Developper tools and "inspect element" are very handy to figure out which classes you to change the css from.

要更改所选标签的条子和颜色，您可以执行以下操作：

To change the sliver and the color of the selected tab, you could do:

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

下面是一个例子（此处）：

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) {
        }
)

这篇关于shinydashboard的选项卡框CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！