Как установить цвет заголовка tabPanel в navbarPage блестящего приложения? - PullRequest
Новая
       15

Как установить цвет заголовка tabPanel в navbarPage блестящего приложения?

0 голосов
/ 24 октября 2018

Я хочу установить цвет заголовков tabPanels в navbarPage.Я пробовал разные подходы, но не мог понять, как это сделать.Ниже приведен воспроизводимый пример.Я также пробовал другие подходы, но ничего не получалось.

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 голосов
/ 24 октября 2018

Это не .tabbable, а .navbar элемент.

Чтобы найти наименование элемента, откройте свое приложение Shiny в любом браузере и проверьте элемент, который вы хотите адаптировать.Все имена и стили элементов представлены на панели проверки.

Я добавил еще несколько адаптируемых элементов и странных цветов в приведенном ниже примере. 

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)
0 голосов
/ 24 октября 2018

веселиться: 

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)
...