代码之家 › 专栏 › 技术社区 › ixodid

不同样式的闪亮下拉列表

shiny r css

3

ixodid · 技术社区 · 7 年前

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

因此每一行将显示为:

红橡- 红橡树 (11671)

橡树- 大果栎 (2705)

白橡树- 白橡木 (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)

1 回复 | 直到 7 年前

1

3

Stéphane Laurent 7 年前

您可以执行以下操作,但斜体只显示在列表中。

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