@asphalt-react/stack v1.16.0

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

vertical

Stacks components vertically

placement

Adjusts alignment of components. start, center and end are the allowed values

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

spacing

Adjusts relative tightness of adjacent components. extraTight, tight, loose and extraLoose are the allowed values.