Usage
This component is used in code only. See the Spacing documentation for more information.
Stack is a 1-dimensional layout system with options to control the direction, spacing, distribution, and relative sizing of its children elements. StackItem is the child element of the component.
Use Stack to layout inline components. If the component you are viewing has all of its child items displayed inline, then most probably Stack is the best solution here.
Examples
Live Preview
Props
Stack
| Name | Description | Type | Default | Values |
|---|---|---|---|---|
gap | The values in the gap are mapped to our semantic spacing tokens, which are small (for S), medium (for M), large (for L), and xlarge (for XL). | string | none | none, small, medium, large, xlarge |
wrap | It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. Values are false (default) and true for multiline items. | boolean | false | false, true |
direction | Direction of the stack items. | string | row | row, column, row-reverse, column-reverse |
align-items | Sets the vertical alignment and distribution of the stack items. | string | flex-start | flex-start, flex-end, center, baseline, stretch |
justify-content | Sets the horizontal alignment and distribution of the stack items. | string | flex-start | flex-start, flex-end, center, space-between |
full-width | Expands the stack to occupy all available widths. | boolean | false | false, true |
full-height | Expands the stack to occupy all available height. | boolean | false | false, true |
StackItem
| Name | Description | Type | Default | Values |
|---|---|---|---|---|
gap | The values in the gap are mapped to our semantic spacing tokens, which are small (for S), medium (for M), large (for L), and xlarge (for XL). | string | none | none, small, medium, large, xlarge |
wrap | It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. Values are false (default) and true for multiline items. | boolean | false | false, true |
direction | Direction of the stack items. | string | row | row, column, row-reverse, column-reverse |
align-items | Sets the vertical alignment and distribution of the stack items. | string | flex-start | flex-start, flex-end, center, baseline, stretch |
justify-content | Sets the horizontal alignment and distribution of the stack items. | string | flex-start | flex-start, flex-end, center, space-between |
full-width | Expands the stack to occupy all available widths. | boolean | false | false, true |
full-height | Expands the stack to occupy all available height. | boolean | false | false, true |
Slots
Stack
| Name | Description |
|---|---|
default | Default content slot |
StackItem
| Name | Description |
|---|---|
default | Default content slot |