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

Question

我试图保持给定标签的颜色（例如“Blue”= 蓝色；“Green”= 绿色），而不管它所在的 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 中？

Answer 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)

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

R Shiny Sortable CSS: Apply different class to labels within the same bucket_list

css

r

jquery-ui-sortable

shiny