Stack aligns & groups components horizontally (default) or vertically. It wraps it's children with a div
and aligns or distributes the space between them. You can use it to stack components like Buttons, Tags, Checkboxes together.
You can control the placement, space distribution and relative tightness of the stacked components.
⚠️ Stack's intended usage is not for general page layouts.
import { Stack } from "@asphalt-react/stack"
import { Button } from "@asphalt-react/button"
<Stack>
<Button>Open</Button>
<Button>Close</Button>
<Button>Toggle</Button>
<Stack>
Components or elements to stack
type | required | default |
---|---|---|
node | true | N/A |
Stacks components vertically
type | required | default |
---|---|---|
bool | false | false |
Adjusts alignment of components. start
, center
and end
are the allowed values
type | required | default |
---|---|---|
enum | false | "start" |
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 |
Adjusts relative tightness of adjacent components. extraTight
, tight
, loose
and extraLoose
are the allowed values.
type | required | default |
---|---|---|
enum | false | "tight" |