layout_columns {bslib} | R Documentation |
Responsive column-based grid layouts
Description
Create responsive, column-based grid layouts, based on a 12-column grid.
Usage
layout_columns(
...,
col_widths = NA,
row_heights = NULL,
fill = TRUE,
fillable = TRUE,
gap = NULL,
class = NULL,
height = NULL
)
Arguments
... |
Unnamed arguments should be UI elements (e.g., card() )
Named arguments become attributes on the containing htmltools::tag element.
|
col_widths |
One of the following:
-
NA (the default): Automatically determines a sensible number of columns
based on the number of children.
A numeric vector of integers between 1 and 12, where each element
represents the number of columns for the relevant UI element. Elements
that happen to go beyond 12 columns wrap onto the next row. For example,
col_widths = c(4, 8, 12) allocates 4 columns to the first element, 8
columns to the second element, and 12 columns to the third element (which
wraps to the next row). Negative values are also allowed, and are treated
as empty columns. For example, col_widths = c(-2, 8, -2) would allocate
8 columns to an element (with 2 empty columns on either side).
A breakpoints() object, where each breakpoint may be either of the
above.
|
row_heights |
One of the following:
A numeric vector, where each value represents the
fractional unit (fr )
height of the relevant row. If there are more rows than values provided,
the pattern will repeat. For example, row_heights = c(1, 2) allows even
rows to take up twice as much space as odd rows.
A list of numeric and CSS length units,
where each value represents the height of the relevant row. If more rows
are needed than values provided, the pattern will repeat. For example,
row_heights = list("auto", 1) allows the height of odd rows to be
driven my it's contents and even rows to be
1fr .
A character vector/string of CSS length units.
In this case, the value is supplied directly to grid-auto-rows .
A breakpoints() object, where each breakpoint may be either of the above.
|
fill |
Whether or not to allow the layout to grow/shrink to fit a
fillable container with an opinionated height (e.g., page_fillable() ).
|
fillable |
Whether or not each element is wrapped in a fillable container.
|
gap |
A CSS length unit defining the
gap (i.e., spacing) between elements provided to ... . This argument is only applicable when fillable = TRUE
|
class |
Additional CSS classes for the returned UI element.
|
height |
Any valid CSS unit (e.g.,
height="200px" ). Doesn't apply when a card is made full_screen
(in this case, consider setting a height in card_body() ).
|
See Also
breakpoints()
for more information on breakpoints.
Examples
x <- card("A simple card")
page_fillable(
layout_columns(x, x, x, x)
)
page_fillable(
layout_columns(
col_widths = c(6, 6, 12),
x, x, x
)
)
page_fillable(
layout_columns(
col_widths = c(6, 6, -2, 8),
row_heights = c(1, 3),
x, x, x
)
)
page_fillable(
fillable_mobile = TRUE,
layout_columns(
col_widths = breakpoints(
sm = c(12, 12, 12),
md = c(6, 6, 12),
lg = c(4, 4, 4)
),
x, x, x
)
)
[Package
bslib version 0.5.1
Index]