首页 > 解决方案 > 更改标记的大小、颜色和 dragulaInput 的文本

问题描述

我使用包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)
  
}

标签: rshinyshinydashboard

解决方案


您必须更改徽章的 css 属性。如果您检查徽章 html,您会看到它们都位于<span>带有id=label-dragula label label-danger.

在此处输入图像描述

由于 span 标签不响应高度和宽度指令,因此您必须将其转换为 inline-block 元素以更改大小(感谢这篇文章)。所有这些都在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)

在此处输入图像描述


推荐阅读