Closed quantitative-technologies closed 4 years ago
This is a great suggestion. Here is the outline of an example that I plan to include in a vignette:
## ---- custom-css-app ------------------------------------------------
## Example shiny app with custom css
library(shiny)
library(sortable)
ui <- fluidPage(
fluidRow(
column(
width = 12,
tags$b("Exercise"),
rank_list(
text = "Drag the items in any desired order",
labels = list(
"one",
"two",
"three",
htmltools::tags$div(
htmltools::em("Complex"), " html tag without a name"
),
"five" = htmltools::tags$div(
htmltools::em("Complex"), " html tag with name: 'five'"
)
),
input_id = "rank_list_1",
class = c("default-sortable custom-sortable") # add custom style
),
tags$style(
HTML("
.rank-list-container.custom-sortable {background-color: #8A8;}
.custom-sortable .rank-list-item {background-color: #BDB;}
")
),
tags$b("Result"),
verbatimTextOutput("results")
)
)
)
server <- function(input, output) {
output$results <- renderPrint({
input$rank_list_1 # This matches the input_id of the rank list
})
}
shinyApp(ui, server)
This example is now in a vignette at Using custom styles with CSS.
I'm closing the issue, but do leave a comment if you have any additional suggestions or comments.
It looks great! I will be getting back to the project this week, and will test it out.
I have no idea about css classes, but I need change the style of my rank_list, e.g. change the background colour of the list items.
An example might be very helpful here.