flex: Understanding responsive arguments

In nteetor/dull: A Reactive Web Framework Built on 'shiny'

Understanding responsive arguments

Description

A responsive argument may be a single value or a named list. Possible names includes default or xs, sm, md, lg, and xl. Specifying a single unnamed value is equivalent to specifying default or xs. The possible values will be described in the specific help page. Most responsive arguments will default to NULL in which case no corresponding style is applied.

Responsive arguments allow you to apply styles to tag elements based on the size of the viewport. This is important when developing applications for both web and mobile. Specifying a single unnamed value the style will be applied for all viewport sizes. Use the names above to apply a style for viewports of that size and larger. For example, specifying list(default = x, md = y) will apply x on extra small and small viewports, but for medium, large, and extra large viewports y is applied.

Styles for larger viewports take precedence. See below for details about each breakpoint.

extra small

How: pass a single value, use name xs, or use name default.

When: the style is always applied, unless supplanted by a style for any other viewport size.

small

How: use name sm.

When: the style is applied when the viewport is at least 576px wide, think landscape phones.

medium

How: use name md.

When: the style is applied when the viewport is at least 768px wide, think tablets.

large

How: use name lg.

When: the style is applied when the viewport is at least 992px wide, think laptop or smaller desktops.

extra large

How: use name xl.

When: the style is applied when the viewport is at least 1200px wide, think large desktops. Flex layout

Use flex() to control how a flex container tag element places its flex items or child tag elements. For more on turning a tag element into a flex container see display(). By default tag elements within a flex container are treated as flex items.

Usage

flex(
  x,
  direction = NULL,
  justify = NULL,
  align = NULL,
  wrap = NULL,
  reverse = NULL
)

Arguments

x	A tag element or .style pronoun.
direction	A responsive argument. One of "row" or "column" specifying the placement of flex items, defaults to NULL. If "row" items are placed vertically, if "column" items are placed horizontally. Browsers place items vertically by default.
justify	A responsive argument. One of "start", "end", "center", "between", or "around" specifying how items are horizontally aligned, defaults to NULL. See the justify section below for more on how the different values affect horizontal spacing.
align	A responsive argument. One of "start", "end", "center", "baseline", or "stretch" specifying how items are vertically aligned, defaults to NULL. See the align section below for more on how the different values affect vertical spacing.
wrap	A responsive argument. One of TRUE or FALSE specifying whether to wrap flex items inside the flex container, tag, defaults to NULL. If TRUE items wrap inside the container, if FALSE items will not wrap. See the wrap section below for more.
reverse	A responsive argument. One of TRUE or FALSE specifying if flex items are placed in reverse order, defaults to NULL. If TRUE items are placed from right to left when direction is "row" or bottom to top when direction is "column".

Examples

div() %>% flex()
# ->
div() %>% cascadess::flex_display()

nteetor/dull documentation built on Nov. 7, 2024, 2:11 p.m.