Using custom styles with CSS"

In sortable: Drag-and-Drop in 'shiny' Apps with 'SortableJS'

knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>"
)

library(sortable)

Using custom styles

Sometimes you want to take control of the styling of your app, e.g. changing colours or sizes.

The functions rank_list() and bucket_list() allows you to set a custom CSS class, and you can then define your own CSS rules that modifies your shiny app.

The default CSS style for a rank list is default-sortable, but you can specify your own class by modifying the class argument.

For example, to add custom-sortable to the CSS class, use:

rank_list(
  class = c("default-sortable", "custom-sortable"), # add custom style
  ...
)

Then you can use any of the standard techniques to Style your apps with CSS to modify your styling.

For example, to modify the custom-sortable class using a shiny tag, use:

tags$style(
  HTML("
    .rank-list-container.custom-sortable {
      background-color: #8A8;
    }
    .custom-sortable .rank-list-item {
      background-color: #BDB;
    }
  ")
)

This app contains a fully worked example that turns the background colours of the rank_list into shades of green:

library(htmltools)
tags$div(
  class = "shiny-app-frame",
  tags$iframe(
    src = "https://andrie-de-vries.shinyapps.io/sortable_custom_css_app/",
    width = "100%",
    height = 450
  )
)

Source code

knitr::read_chunk(
  system.file("shiny-examples/custom_css/app.R", package = "sortable")
)

sortable documentation built on March 31, 2023, 9:35 p.m.