Stack
Last updated
Was this helpful?
Last updated
Was this helpful?
A Stack is a type of Layout module which stacks children vertically or horizontally.
To create a Stack, drag the Stack module from the module library into an open slot on a page.
Layout Settings contains properties that allow you to control how the Stack lays out its children.
Orientation (required)
Dropdown - horizontal or vertical
Defines whether the children of a stack are arranged in either a vertical or horizontal direction.
start
center
end
space-between
space-around
space-evenly
Align Dropdown Sets how children of a stack are aligned. The following options can be used:
start
center
end
Enable Auto Layout
Boolean - true or false
Gap Sizing String Defines the space between children of the Stack. This property will only add space between children, not on the outside edge of children.
Style attribute String, css style property input Can apply additional CSS to customize the stack.
Animation broadcast event
Parameters
stateName - Animation state name that is used for class name based animations.
Scroll to page position broadcast event
Parameters
scrollX - Horizontal scroll position.
scrollY - Vertical scroll position.
anchorElId - Initial HTML Element Id to attempt scrolling to
elementId - Fallback HTML Element Id to scroll to
Dropdown If a preset is selected, will return a flex-layout based on selection. Falls back on orientation.
String
Defines the padding around the edge of the Stack. This property will only add space around the edge of the stack, not between children. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 500px or 5em
String
Defines the margin around the outside of the Stack. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 500px or 5em
String, url Defines a background image for the Stack. This property accepts a URL of an image.
String - Valid color string (white) or hex code (#FFFFF)
Defines a background color for the Stack.
String, css property value Defines the position of the background, if one was specified.
String, css property value Defines the size mode of the background.
String
Defines the max height of the the Stack. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 6px or 1em
String
Defines the minimum height of the the Stack. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 6px or 1em
String
If specified, sets a fixed height (in px or em) of the Stack. This property accepts lengths followed by a relative unit (em, ex, or px) or percentages. Example: 500px or 5em
