Stack
Use Stack to align & group components horizontally (default) or vertically. Components like Buttons, Tags, Checkboxes can be stacked together. Stack wraps its children with a div and aligns or distributes the space between them.
You can control the placement, space distribution and relative tightness of the stacked components.
⚠️ Stack's intended usage is not for general page layouts.
Usage
import Stack from "@asphalt-react/stack"
import Button from "@asphalt-react/button"
<Stack>
<Button>Open</Button>
<Button>Close</Button>
<Button>Toggle</Button>
<Stack>Props
children
Components or elements to stack
| type | required | default |
|---|---|---|
| node | true | N/A |
vertical
Stacks components vertically
| type | required | default |
|---|---|---|
| bool | false | false |
placement
Adjusts alignment of components. start, center and end are the allowed values
| type | required | default |
|---|---|---|
| enum | false | "start" |
distribution
Determines available space distribution. It accepts the following values:
-
even: equal space between components -
fill: components will grow in proportion to their original width/height to fill all the space available
| type | required | default |
|---|---|---|
| enum | false | N/A |
spacing
Adjusts relative tightness of adjacent components. extraTight, tight, loose and extraLoose
are the allowed values.
| type | required | default |
|---|---|---|
| enum | false | "tight" |