在带有 R 闪亮的 selectizeInput 中使用 html

Question

我想在 select(ize)Input 的选项中使用一些 html。有谁知道如何告诉闪亮将选项视为 HTML 的简单解决方案？

library(shiny)

ui <- fluidPage(
  selectInput("test html use", label = "option", choices = c("<div title = 'This is option A'>opt A</div>", "opt B"))
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

Answer 1

为了将selectizeInput 的选项视为HTML，render 选项是要走的路。以下代码将呈现普通输出：

library(shiny)

shinyApp(
  ui = fluidPage(
    br(),
    selectizeInput(
      "slctz", "Select something:",
      choices = list("option1" = "value1", "option2" = "value2"), 
      options = list( 
        render = I("{
        item: function(item, escape) { 
          return '<span>' + item.label + '</span>'; 
        },
        option: function(item, escape) { 
          return '<span>' + item.label + '</span>'; 
        }
      }")
      )
    )
  ),
  server = function(input, output) {}
)

option 字段用于选项列表，而item 字段用于选定选项。

因此，如果您想要设置选项和选定选项的样式，您可以通过将class 属性添加到span 元素并在UI 中定义您的CSS 类来简洁地做到这一点：

ui = fluidPage(
  tags$head(
    tags$style(
      HTML(
        "
        .myoption {......}
        .myitem {......}
        "
      )
    )
  ),
  br(),
  selectizeInput(
    "slctz", "Select something:",
    choices = list("option1" = "value1", "option2" = "value2"), 
    options = list( 
      render = I("{
        item: function(item, escape) { 
          return '<span class=\"myitem\">' + item.label + '</span>'; 
        },
        option: function(item, escape) { 
          return '<span class=\"myoption\">' + item.label + '</span>'; 
        }
      }")
    )
  )
)