Add example of using class option of rank_list

[quantitative-technologies]

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.

[andrie]

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)

[andrie]

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.

[quantitative-technologies]

It looks great! I will be getting back to the project this week, and will test it out.