R语言 闪亮应用:为selectizeInput的每个选项添加徽标

3npbholx  于 2023-01-03  发布在  其他
关注(0)|答案(2)|浏览(107)

我创建了一个闪亮的应用程序,我需要添加一个语言选项。我想添加一个selectizeInput,如:

selectizeInput("language",
                         "Select language:",
                         choices = c("English"="en","Français"="fr"),
                         selected = app_default_languague, multiple=FALSE, width = '70%'
                         )

但是每个国家前面都有国旗。国旗标志在“www/”目录下。你知道我怎么做这个吗?
有一个例子在Rstudio画廊,但我不明白它.... http://shiny.rstudio.com/gallery/selectize-rendering-methods.html

bf1o4zei

bf1o4zei1#

selectizeInput基于Javascript库selectize.js,该库具有强大的设置,包括用于呈现您自己的选项和选定项目的模板。
为了做到这一点,你必须使用一些Javascript代码。这些代码存储在rendersjsItem中。这是一个Javascript函数,它生成并返回一段HTML,如下所示:

<div class="option">
  <img width="25" height="25" class="flag" src="fr.svg" />
  French
</div>

假设您的文件位于 * www * 文件夹中,文件名为国家/地区代码,例如"fr.svg"。下面的示例指定了矢量countries中的名称和国家/地区代码。
你需要做的就是把rendersjsItem作为selectizeInputrender选项,如果你想改变样式,你可以修改flag类的CSS。

    • 完整解决方案**
library(shiny)

countries <- c(German = "de", Czech = "cz", French = "fr")
app_default_languague <- "cz"

# Assuming the flag icons are directly in the 'www' folder with names "de.svg", "cz.svg", etc.
rendersjsItem <- 
  I("{
      option: function(item, escape) {
        return '<div class=\"option\"><img width=\"25\" height=\"25\" class=\"flag\"' +
            'src=\"' + item.value + '.svg\" />' +
            item.label + '</div>';
      }
    }")

ui <- fluidPage(
  tags$head(
    # Add CSS to format the language selection options with flag + text
    tags$style(HTML(".flag {height:24px; width:24px; margin-right: 12px}"))
  ),
  title = "Selectize Test",
  selectizeInput("language", "Select language",
                 choices = countries,
                 selected = app_default_languague, multiple=FALSE, width = "70%",
                 options = list(
                   placeholder = "Type a language name, e.g. German",
                   render = rendersjsItem
                 )),
  textOutput("SelectedLanguage")
)

server <- function(input, output, session) {
  output$SelectedLanguage <- renderText(input$language)
}

shinyApp(ui, server)
    • 旁注**

万维网联盟(W3C)建议不应使用旗帜图标来表示语言。原因有很多。应使用目标语言的语言名称,即不要写"German",而要写"Deutsch"。例如:德语,英语,西班牙语,法语,意大利语,...
另请参见ux.stackexchange

eeq64g8w

eeq64g8w2#

使用jpeg库导入并创建矢量

相关问题