R Shiny Sortable CSS：将不同的类应用于同一bucket_list中的标签答案

【问题标题】：R Shiny Sortable CSS: Apply different class to labels within the same bucket_listR Shiny Sortable CSS：将不同的类应用于同一bucket_list中的标签
【发布时间】：2021-08-23 06:21:49
【问题描述】：

我试图保持给定标签的颜色（例如“蓝色”= 蓝色；“绿色”= 绿色），无论它所在的 bucekt_list 是什么。但是，我只能修改给定 bucket_list 的 CSS，而不是单独的标签本身。因此，标签在当前拖入不同的bucket_list 时不会保持各自的颜色。

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$style( HTML(".green-sortable .rank-list-item {
      background-color: #53C1BE;
      }"),
      HTML(".blue-sortable .rank-list-item {
      background-color: #4080C9;
      }")),
  fluidRow(column(6, uiOutput("example1")),
           column(6,  uiOutput("example2")))

)

server <- function(input, output, session) {
  
  output$example1 <- renderUI({
    bucket_list(
      header = NULL,
      group_name = "colours",
      orientation = "horizontal",
      class = c("default-sortable", "green-sortable"),
      add_rank_list(
        text = " ",
        input_id = "green",
        labels = "Green"
      ))
  })
  
  
  output$example2 <- renderUI({
    bucket_list(
      header = NULL,
      group_name = "colours",
      orientation = "horizontal",
      class = c("default-sortable", "blue-sortable"),
      add_rank_list(
        text = " ",
        input_id = "blue",
        labels = "Blue"
      ))
  })
  
}

shinyApp(ui, server)

如何修改它以使蓝色和绿色标签分别保持蓝色和绿色，而不管它们被拖到哪个bucket_list？

【问题讨论】：

标签： css r shiny jquery-ui-sortable

【解决方案1】：

您需要通过 html 标签（包装在列表中）而不是纯字符来定义元素。在后一种情况下，sortable 将为您设置元素样式，您需要经历一些 JS 痛苦，重新设置样式。因此，更容易自己控制元素。

但是，由于您的元素仍然放置在带有一些样式的外部 <div>（最明显的是 padding）中，因此您需要一些额外的 css 才能获得类似的外观和感觉。

library(shiny)
library(sortable)

ui <- fluidPage(
  tags$style( HTML("#green {
      background-color: #53C1BE;
      }
      .default-sortable .rank-list-container .rank-list-item {
         padding: 0;
      }
      .rank-list-item > div {
         line-height:42px;
      }
      #blue {
         background-color: #4080C9;
      }")),
  fluidRow(column(6, uiOutput("example1")),
           column(6,  uiOutput("example2")))

)

server <- function(input, output, session) {
  
  output$example1 <- renderUI({
    bucket_list(
      header = NULL,
      group_name = "colours",
      orientation = "horizontal",
      class = c("default-sortable", "green-sortable"),
      add_rank_list(
        text = " ",
        input_id = "green",
        labels = list(div("Green", id = "green")) ## define your element yourself
      ))
  })
  
  
  output$example2 <- renderUI({
    bucket_list(
      header = NULL,
      group_name = "colours",
      orientation = "horizontal",
      class = c("default-sortable", "blue-sortable"),
      add_rank_list(
        text = " ",
        input_id = "blue",
        labels = list(div("Blue", id = "blue")) ## define your element yourself
      ))
  })
  
}

shinyApp(ui, server)

【讨论】：