r - Shiny 的下拉输入(selectizeInput),带有超赞的图标

标签 r shiny font-awesome selectize.js

我想包括 Font Awesome Shiny 项目中的图标 selectizeInput .我怎么办?

最佳答案

这是一个函数,selectInputWithIcons ,这就完成了。
enter image description here

library(shiny)
library(fontawesome)
library(htmltools)


selectInputWithIcons <- function(
  inputId, inputLabel, labels, values, icons, iconStyle = NULL,
  selected = NULL, multiple = FALSE, width = NULL
){
  options <- mapply(function(label, value, icon){
    list(
      "label" = label,
      "value" = value,
      "icon"  = as.character(fa_i(icon, style = iconStyle))
    )
  }, labels, values, icons, SIMPLIFY = FALSE, USE.NAMES = FALSE)
  render <- paste0(
    "{",
    "  item: function(item, escape) {", 
    "    return '<span>' + item.icon + '&nbsp;' + item.label + '</span>';", 
    "  },",
    "  option: function(item, escape) {", 
    "    return '<span>' + item.label + '</span>';", 
    "  }",
    "}"
  )
  widget <- selectizeInput(
    inputId  = inputId, 
    label    = inputLabel,
    choices  = NULL, 
    selected = selected,
    multiple = multiple,
    width    = width,
    options  = list( 
      "options"    = options,
      "valueField" = "value", 
      "labelField" = "label",
      "render"     = I(render),
      "items"     = as.list(selected)
    )
  )
  attachDependencies(widget, fa_html_dependency(), append = TRUE)
}


ui <- fluidPage(
  br(),
  selectInputWithIcons(
    "slctz",
    "Select an animal:",
    labels    = c("I want a dog", "I want a cat"),
    values    = c("dog", "cat"),
    icons     = c("dog", "cat"),
    iconStyle = "font-size: 3rem; vertical-align: middle;",
    selected  = "cat"
  )
)

server <- function(input, output, session){
  
  observe({
    print(input[["slctz"]])
  })
  
}


shinyApp(ui, server)

关于r - Shiny 的下拉输入(selectizeInput),带有超赞的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68509486/

相关文章:

R/Shiny - 如何响应式地编写包含 actionButton 的 .csv?

html - 导入 css 文件(CDN 与本地)

c# - 无法在运行时显示自定义字体 - Windows Phone 8.1 MVVM - FontAwesome

r - 在 dplyr 中使用重命名并且列不存在时避免错误

css - 去除shinydashboardPlus中右边栏宽度改变时出现的多余空间

r - 如何将列值转换为百分比

javascript - Shiny 的自定义输出

css - 有没有办法将字体 Awesome Icon 的高度和宽度设置为其父容器的完整宽度和高度?

r - Dplyr 变异用 NA 划分两列

r - Unicode 字符和下一个字符之间没有空格