编辑

Question

是否可以仅将文本的一部分以斜体显示在闪亮的下拉菜单中。例如，在下面的代码中，我希望名称的拉丁部分使用斜体。

因此每一行将显示为：

Red Oak- Quercus rubra （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

您可以执行以下操作，但斜体仅出现在列表中。

if(document.getElementById('design_edit_btn') != null)
{
     alert("exists");
}

我不知道是否可以为所选选项设置样式。我已经看过这种技术here（但是花了一些时间才能达到这个结果，我发现文档不太清楚）。

编辑

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

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)

编辑2

也许最好直接在列表中键入html代码：

  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>"
    }
  }'
                         ))
    )
  })

然后Javascript代码很简单：

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

闪亮下拉菜单中的不同样式

1 个答案:

编辑

编辑2