更改选择器的颜色

时间:2020-08-04 22:27:27

标签: css r shiny

有人从this example开始,请告诉我是否可行,以及如何从{{1}更改pickerInput UI的下拉菜单中的项目字体颜色。 }包裹?

以下是小部件的简短示例:

shinyWidgets
library("shiny")
library("shinyWidgets")

shinyApp(
  ui = 
    shinyUI(fluidPage(
      sidebarLayout(
        sidebarPanel(
          pickerInput("select", label=NULL,
                      choices=LETTERS,
                      selected = LETTERS,
                      multiple=TRUE, 
                      options = list(
                        `actions-box` = TRUE,
                        size = 10,
                        `selected-text-format` = "count > 3"
                      ))
          ),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

2 个答案:

答案 0 :(得分:3)

尝试添加

tags$head(
      tags$style(HTML("
        .dropdown-menu a{
            color: red !important;
        }
  "))

这是您要找的吗?

  ui = 
    shinyUI(fluidPage(tags$head(
      tags$style(HTML("
         .dropdown-menu a{
          color: red !important;
         }
  "))
    ),
      sidebarLayout(
        sidebarPanel(
          pickerInput("select", label=NULL,
                      choices=LETTERS,
                      selected = LETTERS,
                      multiple=TRUE, 
                      options = list(
                        `actions-box` = TRUE,
                        size = 10,
                        `selected-text-format` = "count > 3"
                      ))
        ),
        mainPanel())
    )
    )
server = function(input, output){}

shinyApp(ui, server)

答案 1 :(得分:2)

您可以在其参数中应用所需的样式:

library(shiny)
library(shinyWidgets)

col.list <- c("red","blue","green","orange")

# Change the color
colors <- paste0("color:",col.list,";")

# Change the font
colors <- paste0(colors,"font-family: Arial;")

# Change to bold
colors <- paste0(colors,"font-weight: bold;")

ui <- fluidPage(
    pickerInput("col", "Colour", multiple=T, choices = col.list, 
                choicesOpt = list(
                    style = colors)
    )
)

server <- function(input, output){}

shinyApp(ui, server)

enter image description here

要更改背景,只需应用background

library(shiny)
library(shinyWidgets)
col.list <- c("red","blue","green","orange")
#Change the color
colors <- paste0("background:",col.list,";")
#Change the color
colors <- paste0(colors,"color:white;")
#Change the font
colors <- paste0(colors,"font-family: Arial;")
#Change to bold
colors <- paste0(colors,"font-weight: bold;")

ui <- fluidPage(
    pickerInput("col", "Colour", multiple=T, choices = col.list, 
                choicesOpt = list(
                    style = colors)
    )
)

server <- function(input, output){}

shinyApp(ui, server)

enter image description here

要动态使用颜色,可以执行以下操作:

library(shiny)
library(shinyWidgets)
col.list <- c("red","blue","green","orange")

ui <- fluidPage(
  column(2,
         pickerInput("change", "Select Colour", choices = col.list,multiple = FALSE)
  ),
  column(2,
         pickerInput("col", "Colour", multiple=T, choices = col.list)
  )
)
server <- function(input, output,session){

  observeEvent(input$change,{
    
    colors <- rep(paste0("color:",input$change,";"),length(col.list))
    updatePickerInput(session, "col", choices = col.list,
                      choicesOpt = list(
                        style = colors
                      )
    )
  })
  
}

shinyApp(ui, server)

enter image description here