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" |