时间戳

首页 > 解决方案 > 一种不使用 R Shiny 应用程序在 css 中硬编码项目的方法？

css - 一种不使用 R Shiny 应用程序在 css 中硬编码项目的方法？

问题描述

我有以下代码示例（取自此处）。有没有一种方法可以在不硬编码html css中的值“a”和“b”的情况下工作？如果我有数百个项目，我不想在调用.option[data-value=a]等时对每个项目都进行硬编码。

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a], .item[data-value=a]{
          background: red !important;
          color: white !important;
        }
        .option[data-value=b], .item[data-value=b]{
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

> sessionInfo()
R version 3.6.3 (2020-02-29)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.6

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.6/Resources/lib/libRlapack.dylib

locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8

attached base packages:
[1] stats4    parallel  stats     graphics  grDevices utils     datasets  methods  
[9] base     

other attached packages:
 [1] rsconnect_0.8.16     shinythemes_1.1.2    dplyr_0.8.5          shiny_1.4.0.2       
 [5] BiocParallel_1.20.1  MLInterfaces_1.66.5  cluster_2.1.0        annotate_1.64.0     
 [9] XML_3.99-0.3         AnnotationDbi_1.48.0 IRanges_2.20.2       MSnbase_2.12.0      
[13] ProtGenerics_1.18.0  S4Vectors_0.24.4     mzR_2.20.0           Rcpp_1.0.4.6        
[17] Biobase_2.46.0       BiocGenerics_0.32.0

标签： cssrshinyshinyapps

解决方案

您可以编写一个生成 CSS 代码的函数：

CSS <- function(values, colors){
  template <- "
.option[data-value=%s], .item[data-value=%s]{
  background: %s !important;
  color: white !important;
}"
  paste0(
    apply(cbind(values, colors), 1, function(vc){
      sprintf(template, vc[1], vc[1], vc[2])
    }),
    collapse = "\n"
  )
}

例如，CSS(c("a","b","c"), c("red", "green", "blue"))生成

.option[data-value=a], .item[data-value=a]{
  background: red !important;
  color: white !important;
}

.option[data-value=b], .item[data-value=b]{
  background: green !important;
  color: white !important;
}

.option[data-value=c], .item[data-value=c]{
  background: blue !important;
  color: white !important;
}

然后css <- CSS(c("a","b","c"), c("red", "green", "blue"))在您的应用程序的开头执行并执行tags$style(HTML(css)).

对于许多值，我会使用如下代码：

library(randomcoloR)

CSS <- function(values){
  template <- "
.option[data-value=%s], .item[data-value=%s]{
  background: %s !important;
  color: %s !important;
}"
  colors <- distinctColorPalette(length(values))
  paste0(
    apply(cbind(values, colors), 1, function(vc){
      rgb <- col2rgb(vc[2])
      color <- 
        ifelse(rgb[1]*0.299 + rgb[2]*0.587 + rgb[3]*0.114 > 186, "black", "white")
      sprintf(template, vc[1], vc[1], vc[2], color)
    }),
    collapse = "\n"
  )
}

css <- CSS(letters[1:10])

.option[data-value=a], .item[data-value=a]{
  background: #DE70C1 !important;
  color: white !important;
}

.option[data-value=b], .item[data-value=b]{
  background: #AE53E3 !important;
  color: white !important;
}

.option[data-value=c], .item[data-value=c]{
  background: #8AE450 !important;
  color: white !important;
}

.option[data-value=d], .item[data-value=d]{
  background: #DD8062 !important;
  color: white !important;
}

.option[data-value=e], .item[data-value=e]{
  background: #D5D063 !important;
  color: black !important;
}

.option[data-value=f], .item[data-value=f]{
  background: #D1B6CD !important;
  color: black !important;
}

.option[data-value=g], .item[data-value=g]{
  background: #8390D3 !important;
  color: white !important;
}

.option[data-value=h], .item[data-value=h]{
  background: #8BD6DC !important;
  color: black !important;
}

.option[data-value=i], .item[data-value=i]{
  background: #80DDA0 !important;
  color: black !important;
}

.option[data-value=j], .item[data-value=j]{
  background: #D2D4AE !important;
  color: black !important;
}

如果背景颜色是暗的，则此代码自动设置color为，否则自动设置为。whiteblack

推荐阅读