如何在闪亮的应用程序的navbarPage中设置tabPanel标题的颜色?

时间:2018-10-24 11:58:35

标签: html css r shiny navbar

我想在navbarPage中设置tabPanels标题的颜色。我尝试了不同的方法,但不知道该怎么做。以下是可重现的示例。我也尝试了其他方法,但是没有任何效果。

library(shiny) 
ui <-shinyUI(bootstrapPage( 
  "", 

  navbarPage( 
    tags$style(HTML(" 
                  .tabbable > .nav > a  {font-weight: bold; color:black} 
                  .tabbable > .nav > li > a[data-value='t1'] {color:red} 
                  .tabbable > .nav > li > a[data-value='t2'] {color:blue} 
                  .tabbable > .nav > li > a[data-value='t3'] {color:green} 
                  .tabbable > .nav > li[class=active]    > a {color:aqua} 
                  ")), 
    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) 

2 个答案:

答案 0 :(得分:1)

它不是sp_addextendedproperty而是.tabbable元素。

要找到命名的元素,请在任何浏览器中打开“闪亮”应用程序,然后检查要修改的元素。所有元素名称和样式都显示在检查窗格中。

在下面的示例中,我添加了一些更具适应性的元素和奇怪的颜色。

.navbar

答案 1 :(得分:0)

玩得开心:

library(shiny)
ui <-shinyUI(fluidPage(
  h1("Colored Tabs"),
  tags$style(HTML("
                  .tabbable > .nav > li > a                  {font-weight: bold; background-color: pink;  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: gold; color:white}
                  ")),
  tabsetPanel(
    tabPanel("t0",h2("normal tab in blue", style ="color : blue"), p("normal tabs are in pink"),
             p("active tab is in gold" , style ="font-weight:bold"),
             p("text is is in gold" , style ="font-weight:bold; color:gold")),
    tabPanel("t1",h2("red tab"), p("active tab is in gold" , style ="font-weight:bold; color:gold")),
    tabPanel("t2",h2("blue tab"), p("active tab is in gold" , style ="font-weight:bold")), 
    tabPanel("t3",h2("green tab"), p("active tab is in gold" , style ="font-weight:bold")),
    tabPanel("t4",h2("normal tab"), p("normal tabs are in pink"), p("active tab is in gold" , style ="font-weight:bold")),
    tabPanel("t5",h2("normal tab"), p("normal tabs are in pink"), p("active tab is in gold" , style ="font-weight:bold"))
  )
  ))
server <- function(input, output) {}
shinyApp(ui=ui,server=server)