Skip to contents

Create a css flexbox based HTML tag

Source: R/flex.R
flexPanel.Rd

Creates a HTML tag and automatically generates css style rules based on css flexbox, depending on the given arguments. Functionality acts as a way to generate css flexbox based HTML containers directly from R without the need to write any additional css rules directly.

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 = getBreakpointSystem(),
  id = generateID()
)

Arguments

...

Tag attributes (named arguments) and child elements (unnamed arguments).

Named arguments are treated as additional html attribute values to the parent tag.

Child elements may include any combination of other tags objects, HTML strings, and htmlDependencys.

template

The name of a registered template to use as a base for the grid, or a template object from gridTemplate.

direction

Direction of the flow of elements in the panel.

Accepts a valid css flex-direction value (row | row-reverse | column | column-reverse).

Default value of 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).

Supports breakpoints.

justify_content

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).

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).

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).

Supports breakpoints.

gap

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 different values for row and column spacing).

Supports breakpoints.

flex

A vector of valid css 'flex' values. Defines how child elements in the panel can grow, shrink and their initial size.

Arguments that target child elements require a vector of values instead of a single value, with each entry of the vector affecting the nth child element.

If the vector has less entries that the total number of child elements, the values will be repeated until the pattern affects all elements in the panel. If the vector as more entries 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 child element.

Accepts a valid css flex value vector of values.

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 'flex' values, and can be used make more targeted rules.

Arguments that target child elements require a vector of values instead of a single value, with each entry of the vector affecting the nth child element.

If the vector has less entries that the total number of child elements, the values will be repeated until the pattern affects all elements in the panel. If the vector as more entries 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 child 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 require a vector of values instead of a single value, with each entry of the vector affecting the nth child element.

If the vector has less entries that the total number of child elements, the values will be repeated until the pattern affects all elements in the panel. If the vector as more entries 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 child 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 require a vector of values instead of a single value, with each entry of the vector affecting the nth child element.

If the vector has less entries that the total number of child elements, the values will be repeated until the pattern affects all elements in the panel. If the vector as more entries 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 child element.

By default NULL is used, meaning values from the flex argument will be used instead. Supports breakpoints.

breakpoint_system

Breakpoint system to use.

id

The parent element id.

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 css media rules, some arguments allow a named list can be passed instead of a single value.

The names in that list can be any of the breakpoints available in the breakpoint_system argument.

It is recommended to define the breakpoint system for the application globally before UI definitions, but the breakpoint_system in panel functions allows for more flexibility when reusing components from other projects.

See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for additional details on using css flexbox.

For a full list of valid HTML attributes check visit https://www.w3schools.com/tags/ref_attributes.asp.

See also

flexPage