Use gridlayout for entire app layout

This is the typical way to use gridlayout in your Shiny app. grid_page will make up the entire ui declaration of the app. Under the hood it uses shiny::fluidPage() and grid_container. Elements are placed in the layout by wrapping in a grid_card() with the area set to the area in the layout the element should be placed in.

grid_page(
  layout,
  ...,
  row_sizes = NULL,
  col_sizes = NULL,
  gap_size = NULL,
  container_height = "viewport",
  theme = bslib::bs_theme(version = 5),
  flag_mismatches = FALSE
)

Arguments

layout

Either a markdown table representation (see md_to_gridlayout) or a gridlayout object defining the desired layout for your Shiny app.

...

grid_card() (or similar) arguments that will fill the grid layout. Note the areas should match the those provided in layout.

row_sizes

A character vector of valid css sizes for the height of each row in your grid as given by the main layout definition. If a single value is passed, it will be repeated for all columns. If sizes are provided both here and in the main layout then these sizes will be the ones used.

col_sizes

Same as row_sizes, but for column widths

gap_size

Valid css sizing for gap to be left between each element in your grid. Like row_sizes and col_sizes, this will win-out over a gap size provided in the main layout table.

container_height

Optional parameter to control height of page. Defaults to "viewport" so app takes up full vertical space of page. See argument of same name in new_gridlayout() for more options.

theme

Optional argument to pass to theme argument of fluidPage.

flag_mismatches

Should mismatches between the named arguments and layout elements trigger an error?

Value

A UI definition that can be passed to the shinyUI function.

See also

See vignette("defining-a-layout", package = "gridlayout") for more info on defining your layout. grid_container() for using gridlayout without also setting up the root page layout. grid_nested() for placing a grid container within another gridlayout. grid_card() for placing content inside your layout.

Examples

if (FALSE) {
library(gridlayout)
library(shiny)
library(bslib)

shinyApp(
  ui = grid_page(
    layout = c(
      "header  header",
      "sidebar distPlot"
    ),
    row_sizes = c("50px", "1fr"),
    col_sizes = c("200px", "1fr"),
    grid_card_text("header", "This is my header"),
    grid_card(
      area = "sidebar",
      card_header("Settings"),
      card_body(
        sliderInput("bins", "Number of bins:", 1, 50, 30, width = "100%")
      )
    ),
    grid_card_plot("distPlot")
  ),
  server = function(input, output) {
    output$distPlot <- renderPlot({
      x    <- faithful[, 2]
      bins <- seq(min(x), max(x), length.out = input$bins + 1)
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
  }
)
}