Shiny 中的 CSS：为动态标签着色

Question

学习 CSS，是否可以根据标题为标签分配颜色？

示例：从矢量元素名称创建选项卡并将元素值指定为颜色。

vec = c("Tab_1" = "#4185FB", "Tab_2" = "#FFC60A", "Tab_3" = "#EB002A")

vec
    Tab_1     Tab_2     Tab_3 
"#4185FB" "#FFC60A" "#EB002A"

闪亮的应用：

library(shiny)

vec = c("Tab_1" = "#4185FB", "Tab_2" = "#FFC60A", "Tab_3" = "#EB002A")

ui <- fluidPage(
  do.call(tabsetPanel,
          c(lapply(names(vec),
                   function(x){
                    tab_color = unname(vec[names(vec) == x])
                    
                    tabPanel(tags$head(tags$style(HTML(glue("'
                        .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{{
                            color: {tab_color};
                        }}'")))),
                             title = x
                    )
                   }
            ))
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

这样颜色保持不变。

Answer 1

这是一种方法：

library(shiny)

vec = c("Tab_1" = "#4185FB", "Tab_2" = "#FFC60A", "Tab_3" = "#EB002A")

CSS <- paste0(mapply(
  function(x,y){
    sprintf("
.nav-tabs>li.active>a[data-value='%s'], 
.nav-tabs>li.active>a[data-value='%s']:focus, 
.nav-tabs>li.active>a[data-value='%s']:hover {
  color: %s;
}", x, x, x, y)
  },
  names(vec), vec
), collapse = "\n")

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  do.call(tabsetPanel,
          c(lapply(names(vec),
                   function(x){
                     tabPanel(
                       title = x
                     )
                   }
          ))
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)