Stack & Stack Child
Stack Overview
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.
Stack Props
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.inlineMQ<boolean>
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.spaceInlineMQ<string>
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.spaceStackMQ<string>
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.listMQ<boolean>
If provided, the stack container renders as 'ul' and every child element is wrapped inside a 'li'.flexGrowMQ<boolean | number>
CSS property sets the flex grow factor of a flex item main size. More informationflexShrinkMQ<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 informationflowReverseMQ<boolean>
If true, add a '-reverse' suffix to the flex direction property: row-reverse or column-reverse.More informationariaLabelstring
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.paddingInlineMQ<string>
It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints. paddingInlineStartMQ<string>
It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints. paddingInlineEndMQ<string>
It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints. paddingBlockMQ<string>
It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints. paddingBlockStartMQ<string>
It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints. paddingBlockEndMQ<string>
It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints. marginInlineMQ<string>
It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints. marginInlineStartMQ<string>
It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints. marginInlineEndMQ<string>
It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints. marginBlockMQ<string>
It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints. marginBlockStartMQ<string>
It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints. marginBlockEndMQ<string>
It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints. This
Is
A
Stack
Example
Showing
Multiple
Tags
orderMQ<number>
Defines the order of the element within the stack.paddingInlineMQ<string>
It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints. paddingInlineStartMQ<string>
It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints. paddingInlineEndMQ<string>
It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints. paddingBlockMQ<string>
It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints. paddingBlockStartMQ<string>
It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints. paddingBlockEndMQ<string>
It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints. marginInlineMQ<string>
It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints. marginInlineStartMQ<string>
It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints. marginInlineEndMQ<string>
It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints. marginBlockMQ<string>
It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints. marginBlockStartMQ<string>
It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints. marginBlockEndMQ<string>
It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints. Usage
Tag 1
Tag 2
Tag 3
1<Stack>
2 <StackChild order={3}>
3 <Tag>Tag 1</Tag>
4 </StackChild>
5 <StackChild order={1}>
6 <Tag>Tag 2</Tag>
7 </StackChild>
8 <StackChild order={2}>
9 <Tag>Tag 3</Tag>
10 </StackChild>
11</Stack>