gridlayout objectnew_gridlayout.RdBuilds the gridlayout s3 class that holds information needed to draw a given layout.
new_gridlayout(
layout_def = list(),
row_sizes = NULL,
col_sizes = NULL,
gap_size = NULL,
container_height = NULL,
alternate_layouts = "auto"
)Either a list of elements with the id, start_row,
end_row, start_col, and end_col format, or a markdown table defining a
layout.
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.
Same as row_sizes, but for column widths
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.
Valid css unit determining how tall the containing
element should be for this layout. Defaults to 100%. Special value of
"viewport" for full-page height maps to the CSS value of 100vh if any
relative units (e.g. fr or auto) are included in row sizes and auto
otherwise. Values such as "auto" will let the page grow to as large as it needs to be to fit all
content. This should most likely be avoided when using row heights in
relative units.
A list of layouts to be used for different viewport
widths. This is enables your app to adapt to different screensizes such as a
phone or an ultra-wide monitor. Each entry in this list must contain a
layout: or valid layout declaration (see Declaring your layout section), and
width_bounds: or a list with at least one of a min and max value for
when your page appears. See add_alternate_layout() for more details. If no
alternate layouts are given a single-column layout will be automatically
applied for mobile screens (viewports less than 600px wide). Set to NULL
to avoid this.
Object of class "gridlayout"
There are three current ways to declare layouts (aka inputs to
layout_def).
The easiest and cleanest way to declare your layout is to use an array where each row is an element and each column is separated by spaces. This allows you to easily visually align your layouts that look good even if your code is re-formated.
new_gridlayout(
c("header header",
"plota plotb")
)
#> gridlayout of 3 elements:
#> 1fr 1fr
#> auto header header
#> auto plota plotb
#> Gap of 12px. Total height of 100%.
#>
#> Alternate layouts:
#>
#> - Width < 500px
#> 1fr
#> 85px header
#> 350px plota
#> 350px plotb
#> Gap of 12px. Total height of auto.You can also use a markdown table wrapped in a single character string. In this format you define a grid using the table and then place your grid "elements" within that grid using their grid id. So for a 2x2 layout with a header along the top and two plots side-by-side the layout would look as follows:
new_gridlayout(
"| header | header |
| plota | plotb |" )
#> gridlayout of 3 elements:
#> 1fr 1fr
#> auto header header
#> auto plota plotb
#> Gap of 12px. Total height of 100%.
#>
#> Alternate layouts:
#>
#> - Width < 500px
#> 1fr
#> 85px header
#> 350px plota
#> 350px plotb
#> Gap of 12px. Total height of auto.An important caveat of this style is it is not currently able to be detected using the "edit current layout" grided addin.
The second method is to supply a list of elements by providing the following information for each:
id: Identifying id of the element (e.g. "header)
start_row/end_row: The (1-indexed) start and end row of your element's
span
start_col/end_col: The start and end column for your element's span
This is a bit more verbose but allows for greater control. Here you can have overlapping elements etc..
The same layout as declared above can be accomplished with the following:
new_gridlayout( list(
list(id = "header", start_row = 1, end_row = 1, start_col = 1, end_col = 2),
list(id = "plot_a", start_row = 2, end_row = 2, start_col = 1, end_col = 1),
list(id = "plot_b", start_row = 2, end_row = 2, start_col = 2, end_col = 2)
) )
#> gridlayout of 3 elements:
#> 1fr 1fr
#> 1fr header header
#> 1fr plot_a plot_b
#> Gap of 12px. Total height of 100%.
#>
#> Alternate layouts:
#>
#> - Width < 500px
#> 1fr
#> 85px header
#> 350px plot_a
#> 350px plot_b
#> Gap of 12px. Total height of auto.By default a mobile-friendly layout is generated that is simply your
elements stacked in a single column. If you want to adjust this or add
layouts screen-sizes other than just a mobile view, you can with the
alternate_layouts argument.
Alternate layouts are simply other layouts that are used based upon the size of the viewport. This is typically used to add a mobile view (or a desktop view if your app is mobile first.)
To define an alternate layout you need to pass a list containing layout
and width_bounds elements.
new_gridlayout(
"|header |header |
|plot_a |plot_b |",
alternate_layouts = list(
layout = "
|header |
|plot_a |
|plot_b |",
width_bounds = c(max = 500)
)
)
#> gridlayout of 3 elements:
#> 1fr 1fr
#> auto header header
#> auto plot_a plot_b
#> Gap of 12px. Total height of 100%.
#>
#> Alternate layouts:
#>
#> - Width < 500px
#> 1fr
#> auto header
#> auto plot_a
#> auto plot_b
#> Gap of 12px. Total height of 100%.Multiple layouts can also be added. Simply enclose them as a list of lists.
See vignette("defining-a-layout", package = "gridlayout") and vignette("alternate-layouts", package = "gridlayout") for a more in-depth overview.
# Assemble list of elements along with their positions
elements_list <- list(
list(id = "header", start_row = 1, end_row = 1,
start_col = 1, end_col = 2),
list(id = "plot", start_row = 2, end_row = 2,
start_col = 1, end_col = 1),
list(id = "table", start_row = 2, end_row = 2,
start_col = 2, end_col = 2),
list(id = "footer", start_row = 3, end_row = 3,
start_col = 1, end_col = 2)
)
new_gridlayout(
elements_list,
col_sizes = c("1fr", "2fr"),
row_sizes = c("100px", "1fr", "1fr")
)
#> gridlayout of 4 elements:
#> 1fr 2fr
#> 100px header header
#> 1fr plot table
#> 1fr footer footer
#> Gap of 12px. Total height of 100%.
#>
#> Alternate layouts:
#>
#> - Width < 500px
#> 1fr
#> 85px header
#> 350px plot
#> 350px table
#> 350px footer
#> Gap of 12px. Total height of auto.
# Can also use a matrix for more visually intuitive laying out
new_gridlayout(
layout_def = "
| header | header |
| plota | plotb |",
col_sizes = c("1fr", "2fr"),
row_sizes = c("100px", "1fr"),
gap_size = "2rem"
)
#> gridlayout of 3 elements:
#> 1fr 2fr
#> 100px header header
#> 1fr plota plotb
#> Gap of 2rem. Total height of 100%.
#>
#> Alternate layouts:
#>
#> - Width < 500px
#> 1fr
#> 85px header
#> 350px plota
#> 350px plotb
#> Gap of 2rem. Total height of auto.