Skip to contents

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() strings

  • htmlDependency()s

  • Single-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() and registerTemplate() 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.

Value

An HTML tagList.

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

See also

Examples

if (interactive()) {
library(shiny)
library(imola)
flexPanel(
  div("example content"),
  div("example content"),
  div("example content")
)
}