Stack

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.

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