css - Shiny 下拉列表中的不同样式

Question

是否有可能只有部分文本以斜体显示在 Shiny 的下拉列表中。例如，在下面的代码中，我希望名称的拉丁部分为斜体。

因此每一行将显示为:

红橡 - 红栎 (11671)

Bur Oak - Quercus macrocarpa (2705)

白橡木 - Quercus alba (2437)

library(shiny)
library(tidyverse)

ui <- fluidPage(
  tags$head(
    tags$style(HTML("
                    .item {
                    font-style: italic;
                    }
                    .selectize-dropdown-content  {
                    font-style: italic;
                    }
                    "))
    ),
  mainPanel(
    uiOutput(outputId = "tree"),

    # Print selected tree
    verbatimTextOutput("selection")
  )
)


server <- function(input, output){

  my_list <- reactive({
    data <- c("Red Oak - Quercus rubra (11671)",
                "Bur Oak - Quercus macrocarpa (2705)",
                "White Oak - Quercus alba (2437)"
    )
    my_list <- as.character(data)

  })

  output$tree <- renderUI({
        selectInput(inputId = "tree", label = "Select a Tree", choices = my_list())
  })

  # Need reactive function to display variable that holds selected tree
  output$selection <- renderPrint({
        input$tree
  })
}

shinyApp(ui = ui, server = server)

Answer 1

您可以按如下方式操作，但斜体仅出现在列表中。

library(shiny)

ui <- fluidPage(
  mainPanel(
    selectizeInput(inputId = "tree", label = "Select a Tree", choices = NULL),

    # Print selected tree
    verbatimTextOutput("selection")
  )
)    

server <- function(input, output, session){

  my_list <- reactive({
    list(`Red Oak - Quercus rubra (11671)` = "red",
         `Bur Oak - Quercus macrocarpa (2705)` = "bur")
  })

  observe({
    updateSelectizeInput(session, "tree", 
                         choices = my_list(),
                         options = list(render = I(
                           '{
    option: function(item, escape) {
    var splittedLabel = escape(item.label).split(" - ");
    return "<div>" + splittedLabel[0] + " - <i>" + splittedLabel[1] + "</i></div>"
    }
  }'
                         )))
  })

  output$selection <- renderPrint({
    input$tree
  })
}

shinyApp(ui = ui, server = server)

我不知道是否可以获得所选选项的样式。我见过这种技术here (但我花了一些时间才达到这个结果，我发现文档不是很清楚)。

编辑

我也找到了如何获取所选选项的样式:

  observe({
    updateSelectizeInput(session, "tree", 
                         choices = my_list(),
                         options = list(render = I(
                           '{
    item: function(item, escape) {
      var splittedLabel = escape(item.label).split(" - ");
      return "<div>" + splittedLabel[0] + " - <i>" + splittedLabel[1] + "</i></div>"
    },
    option: function(item, escape) {
      var splittedLabel = escape(item.label).split(" - ");
      return "<div>" + splittedLabel[0] + " - <i>" + splittedLabel[1] + "</i></div>"
    }
  }'
                         ))
    )
  })

编辑 2

也许直接在列表中输入html代码会更好:

  my_list <- reactive({
    list(`Red Oak - <i>Quercus rubra</i> (11671)` = "red",
         `Bur Oak - <i>Quercus macrocarpa</i> (2705)` = "bur")
  })

那么 Javascript 代码就很简单了:

  observe({
    updateSelectizeInput(session, "tree", 
                         choices = my_list(),
                         options = list(render = I(
                           '{
                           item: function(item, escape) {
                           return "<div>" + item.label + "</div>"
                           },
                           option: function(item, escape) {
                           return "<div>" + item.label + "</div>"
                           }
  }'
                         ))
                         )
    })