html - 如何在 Shiny 的应用程序的 navbarPage 中设置 tabPanel 标题的颜色？

Question

我想在 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) 

Answer 1

它不是 .tabbable 而是 .navbar 元素。

要查找元素命名，请在任何浏览器中打开您的 Shiny 应用程序并检查您要调整的元素。所有元素名称和样式都显示在检查 Pane 中。

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

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

  navbarPage( 
    tags$style(HTML(" 
        .navbar-default .navbar-brand {color: cyan;}
        .navbar-default .navbar-brand:hover {color: blue;}
        .navbar { background-color: gray;}
        .navbar-default .navbar-nav > li > a {color:black;}
        .navbar-default .navbar-nav > .active > a,
        .navbar-default .navbar-nav > .active > a:focus,
        .navbar-default .navbar-nav > .active > a:hover {color: pink;background-color: purple;}
        .navbar-default .navbar-nav > li > a:hover {color: black;background-color:yellow;text-decoration:underline;}
        .navbar-default .navbar-nav > li > a[data-value='t1'] {color: red;background-color: pink;}
        .navbar-default .navbar-nav > li > a[data-value='t2'] {color: blue;background-color: lightblue;}
        .navbar-default .navbar-nav > li > a[data-value='t3'] {color: green;background-color: lightgreen;}
                  ")), 
    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)