The Stack component is a low-level foundational component used to layout items in a horizontal or vertical stack, with even spacing between the items. Distribution requires the Stacks parent to have a width and height values set.
The Stack has a number of props to facilitate a variety of uses. Custom and required props are detailed below:
flowMQ<Flow.VerticalLeft | Flow.VerticalCenter | Flow.VerticalRight | Flow.VerticalStretch | Flow.HorizontalTop | Flow.HorizontalCenter | Flow.HorizontalBottom | Flow.HorizontalStretch> = Flow.Vertical
If provided, defines the flow direction of the stack contents.
If provided, changes the `display` to inline-flex.
stackDistributionMQ<StackDistribution> = StackDistribution.SpaceAround
If provided, defines the type of spacing used to layout the items in the stack.
When the Stack has a horizontal flow, this property is used to set horizontal spacing between each item. When the Stack has a vertical flow, this property is used to set vertical spacing between each item.
When the Stack has a horizontal flow and its items are allowed to wrap, this property is used to set space between the rows. When the Stack has a vertical flow and its items are allowed to wrap, this property is used to set space between the columns.
heightMQ<string> = 100%
If provided, defines the height of the Stack. In a scenario where we have a Stack with siblings within a container that has defined height, we would need to set height:auto to the Stack, otherwise the container wouldn't calculate it's own height correctly.
wrapMQ<wrap | nowrap | wrap-reverse>
If provided, defines if the content of the stack wraps.
If provided, the stack container renders as 'ul' and every child element is wrapped inside a 'li'.
flexShrinkMQ<boolean | number>
CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.More information
If true, add a '-reverse' suffix to the flex direction property: row-reverse or column-reverse.More information
The aria-label attribute is recommended to be used when the stack is rendered as a list. This will allow screen readers to label the content of the list.
## StackChild Overview The StackChild component is used to introduce custom order for the children of Stack. It is required for the component to be used within a `Stack`. It's behaviour is derived from the functionality of a child element in a classic `flex` container. ## StackChild Props The Stack has a number of props to facilitate a variety of uses. Custom and required props are detailed below: