rstudio / bslib

Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5.
https://rstudio.github.io/bslib/
Other
443 stars 50 forks source link

feat: ensure min/max height args on `value_box()` and column layouts #1016

Closed gadenbuie closed 3 months ago

gadenbuie commented 3 months ago

Fixes #973 #974

Example

Example App ```r library(shiny) library(bslib) library(ggplot2) data(penguins, package = "palmerpenguins") # Calculate column means for the value boxes means <- colMeans( penguins[c("bill_length_mm", "bill_length_mm", "body_mass_g")], na.rm = TRUE ) ui <- page_sidebar( title = "Penguins dashboard", sidebar = sidebar( varSelectInput( "color_by", "Color by", penguins[c("species", "island", "sex")], selected = "species" ) ), layout_columns( fill = FALSE, value_box( title = "Average bill length", value = scales::unit_format(unit = "mm")(means[[1]]), showcase = bsicons::bs_icon("align-bottom") ), value_box( title = "Average bill depth", value = scales::unit_format(unit = "mm")(means[[2]]), showcase = bsicons::bs_icon("align-center"), theme_color = "dark" ), value_box( title = "Average body mass", value = scales::unit_format(unit = "g", big.mark = ",")(means[[3]]), showcase = bsicons::bs_icon("handbag"), theme_color = "secondary" ) ), layout_columns( min_height = 300, #<< max_height = 400, #<< card( full_screen = TRUE, card_header("Bill Length"), plotOutput("bill_length") ), card( full_screen = TRUE, card_header("Bill depth"), plotOutput("bill_depth") ) ), card( min_height = 400, #<< full_screen = TRUE, card_header("Body Mass"), plotOutput("body_mass") ) ) server <- function(input, output) { gg_plot <- reactive({ ggplot(penguins) + geom_density(aes(fill = !!input$color_by), alpha = 0.2) + theme_bw(base_size = 16) + theme(axis.title = element_blank()) }) output$bill_length <- renderPlot(gg_plot() + aes(bill_length_mm)) output$bill_depth <- renderPlot(gg_plot() + aes(bill_depth_mm)) output$body_mass <- renderPlot(gg_plot() + aes(body_mass_g)) } shinyApp(ui, server) ```

The example app above has three rows of elements in a fillable page_sidebar() container. Without adding min_height anywhere in the UI, at small screen heights the app looks like this:

image

Adding min_height = 300 to the layout_columns() with the two plots and min_height = 400 to the final card, we now have a layout that scrolls at small screen heights.

image