更改标记的大小、颜色和 dragulaInput 的文本答案

【问题标题】：Change size, color of badge and text of dragulaInput更改标记的大小、颜色和 dragulaInput 的文本
【发布时间】：2020-09-05 01:16:07
【问题描述】：

我使用包esquisse创建输入，不知道如何更改徽章的大小、颜色文本和徽章颜色？

if (interactive()) {
  
  library("shiny")
  library("esquisse")
  
  
  ui <- fluidPage(
    tags$h2("Demo dragulaInput"),
    tags$br(),
    dragulaInput(
      inputId = "dad",
      sourceLabel = "Old",
      targetsLabels = c("New"),
      choices = levels(iris[,"Species"]),
      width = "250px",
      height = "100px",
      status = "danger"
    ),
    verbatimTextOutput(outputId = "result")
  )
  
  
  server <- function(input, output, session) {
    
    output$result <- renderPrint({
      new_level <- input$dad$target$New
      new_level_1 <- c(new_level,input$dad$source)
       })
    
  }
  
  shinyApp(ui = ui, server = server)
  
}

【问题讨论】：

标签： r shiny shinydashboard

【解决方案1】：

您必须更改徽章的 css 属性。如果您检查徽章 html，您会发现它们都位于带有 id=label-dragula label label-danger 的 <span> 标记中。

由于 span 标签不响应 height 和 width 指令，您必须将其转换为 inline-block 元素以更改大小（感谢this 帖子）。所有这些都在tags$style() 函数中完成 - 宽度和高度是不言自明的，背景颜色是徽章的颜色，颜色是文本的颜色。

library("shiny")
library("esquisse")


ui <- fluidPage(
  tags$h2("Demo dragulaInput"),
  tags$br(),
  tags$style("
    span.label-danger{
      display: inline-block;
      width: 75px;
      height: 75px;
      background-color: blue;
      color: red;
      font-size: 25px;
    }
    "),
  dragulaInput(
    inputId = "dad",
    sourceLabel = "Old",
    targetsLabels = c("New"),
    choices = levels(iris[,"Species"]),
    width = "250px",
    height = "200px",
    status = "danger"
  ),
  verbatimTextOutput(outputId = "result")
)


server <- function(input, output, session) {
  
  output$result <- renderPrint({
    new_level <- input$dad$target$New
    new_level_1 <- c(new_level,input$dad$source)
  })
  
}

shinyApp(ui = ui, server = server)

【讨论】：

当我把 font-size: 25px;在样式标签中，它对我有用。我编辑了答案以包含它。