Stack

A Stack containing children elements arranged horizontally

Overview

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

Layout Settings contains properties that allow you to control how the Stack lays out its children.

Properties

Orientation (required) Dropdown - horizontal or vertical Defines whether the children of a stack are arranged in either a vertical or horizontal direction.

A Horizontal stack

A Vertical stack

Preset Dropdown If a preset is selected, will return a flex-layout based on selection. Falls back on orientation.

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

Padding 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

Margin 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

Background Image String, url Defines a background image for the Stack. This property accepts a URL of an image.

Background Color String - Valid color string (white) or hex code (#FFFFF) Defines a background color for the Stack.

Background Position String, css property value Defines the position of the background, if one was specified.

Background Size String, css property value Defines the size mode of the background.

Max Height 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

Min Height 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

Height 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

Style attribute String, css style property input Can apply additional CSS to customize the stack.

Nodes

Broadcasters

Stacked:animationState

Animation broadcast event

Parameters

stateName - Animation state name that is used for class name based animations.

Stacked:scrollTo

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