knitr::opts_chunk$set( collapse = TRUE, comment = "#>" )
library(sortable)
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 ) )
knitr::read_chunk( system.file("shiny/custom_css/app.R", package = "sortable") )
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.