Create a flexbox based panel
Usage
flexPanel(
...,
template = NULL,
direction = "row",
wrap = "nowrap",
justify_content = "flex-start",
align_items = "stretch",
align_content = "flex-start",
gap = 0,
flex = c(1),
grow = NULL,
shrink = NULL,
basis = NULL,
breakpoint_system = activeBreakpoints(),
id = generateID()
)
Arguments
- ...
Tag attributes (named arguments) and children (unnamed arguments). A named argument with an
NA
value is rendered as a boolean attributes. Named arguments can be used to provide additional values to the container of the grid.For a full list of valid HTML attributes check visit https://www.w3schools.com/tags/ref_attributes.asp.
Children may include any combination of:
Other tags objects
HTML()
stringshtmlDependency()
sSingle-element atomic vectors
- template
The name of the template to use as a base for the grid, or the resulting value from using makeTemplate() to generate a template object.
See
listTemplates()
andregisterTemplate()
for more information.- direction
Direction of the flow of elements in the panel.
Accepts a valid css
flex-direction
value (row
|row-reverse
|column
|column-reverse
).By default the
row
value is used. Supports breakpoints.- wrap
Should elements be allowed to wrap into multiple lines.
Accepts a valid css
flex-wrap
value (nowrap
|wrap
|wrap-reverse
).By default the value
wrap
is used. Supports breakpoints.- justify_content
Defines the alignment along the main axis. Accepts a valid css
justify-content
value (flex-start
|flex-end
|center
|space-between
|space-around
|space-evenly
|start
|end
|left
|right
).By default the value
flex-start
is used. Supports breakpoints.- align_items
Defines the default behavior for how flex items are laid out along the cross axis on the current line.
Accepts a valid css
align-items
value (stretch
|flex-start
|flex-end
|center
|baseline
|first baseline
|last baseline
|start
|end
|self-start
|self-end
).By default the value
stretch
is used. Supports breakpoints.- align_content
Aligns a flex container’s lines within when there is extra space in the cross-axis.
Accepts a valid css
align-content
value (flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline).By default the value 'flex-start' is used. Supports breakpoints.
- gap
Defines the space between elements in the panel. Controls both the space between rows and columns.
Accepts a css valid value, or 2 values separated by a space (if using diferent values for row and column spacing).
By default the value
0
is used. Supports breakpoints.- flex
A vector of valid css 'flex' values for the child elements. Defines how elements in the panel can grow, shrink and their initial size.
Arguments that target child elements individually require a vector of values instead of a single value, with each entry of the vector affecting the nth child element.
If the given vector has less entries that the number of child elements, the values will be repeated until the pattern affects all elements in the panel. If the number of entries given is more that the number of child elements, exceeding entries will be ignored. NA can also be used as a entry to skip adding a rule to a specific nth element.
Accepts a valid css
flex
value.By default c(1) is used, meaning all elements can grow and shrink as required, at the same rate. Supports breakpoints.
- grow
A vector of valid css 'flex-grow' values. Defines the rate of how elements can grow. Entries will overwrite the nth 'flex' value, and can be used make more targeted rules.
Entries will overwrite the 'flex' values, and can be used make more targeted rules.
Arguments that target child elements individually require a vector of values instead of a single value, with each entry of the vector affecting the nth child element.
If the given vector has less entries that the number of child elements, the values will be repeated until the pattern affects all elements in the panel. If the number of entries given is more that the number of child elements, exceeding entries will be ignored. NA can also be used as a entry to skip adding a rule to a specific nth element.
By default NULL is used, meaning values from the flex argument will be used instead. Supports breakpoints.
- shrink
A vector of valid css 'flex-shrink' values. Defines the rate of how elements can shrink. Entries will overwrite the nth 'flex' value, and can be used make more targeted rules.
Arguments that target child elements individually require a vector of values instead of a single value, with each entry of the vector affecting the nth child element.
If the given vector has less entries that the number of child elements, the values will be repeated until the pattern affects all elements in the panel. If the number of entries given is more that the number of child elements, exceeding entries will be ignored. NA can also be used as a entry to skip adding a rule to a specific nth element.
By default NULL is used, meaning values from the flex argument will be used instead. Supports breakpoints.
- basis
A vector of valid css 'flex-basis' values. Defines the base size of elements. Entries will overwrite the nth 'flex' value, and can be used make more targeted rules.
Arguments that target child elements individually require a vector of values instead of a single value, with each entry of the vector affecting the nth child element.
If the given vector has less entries that the number of child elements, the values will be repeated until the pattern affects all elements in the panel. If the number of entries given is more that the number of child elements, exceeding entries will be ignored. NA can also be used as a entry to skip adding a rule to a specific nth element.
By default NULL is used, meaning values from the flex argument will be used instead. Supports breakpoints.
- breakpoint_system
Optional Media breakpoints to use. Will default to the current active breakpoint system.
- id
The panel id. A randomly generated one is used by default. You cannot have more than one element with the same id in an HTML document.
Details
Behaves similar to a normal HTML tag, but provides helping arguments that simplify the way flexbox css can be created from shiny.
Note
When creating responsive layouts based on media rules, for most css arguments a named list can be passed instead of a single value.
The names in the list can be any of the registered breakpoints available in
activeBreakpoints()
, of on the provided breakpoint_system
argument.
Current global activeBreakpoints()
can be changed using
setBreakpointSystem()
.
In a similar fashion, the current activeBreakpoints()
can also be
modified with the registerBreakpoint()
and unregisterBreakpoint()
.
It is recomended to define the breakpoint system for the application
globally before UI definitions, but the breakpoint_system
in panel
functions allows for more flexibility when it comes to reuse components
from other projects.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for additional details on using css flexbox