问题描述
我试图保持给定标签的颜色（例如“蓝色”=蓝色；“绿色”=绿色），而不管它所在的 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,"blue-sortable"),input_id = "blue",labels = "Blue"
))
})
}
shinyApp(ui,server)
如何将其修改为让蓝色和绿色标签分别保持蓝色和绿色，而不管它们被拖到哪个 bucket_list 中？
解决方法
您需要通过 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,"blue-sortable"),input_id = "blue",labels = list(div("Blue",id = "blue")) ## define your element yourself
))
})
}
shinyApp(ui,server)
