Stack

Allows user to easily stack elements with space between them.

version

4.2.0

install

yarn add @welcome-ui/stack

usage

import { Stack } from '@welcome-ui/stack'

The default use of Stack will stack its children vertically.


<Stack>
  <div>Foo</div>
  <div>Bar</div>
  <div>Baz</div>
</Stack>

You can change the direction & the spacing.


<Stack direction="row" spacing="xl">
  <div>Foo</div>
  <div>Bar</div>
  <div>Baz</div>
</Stack>

It will ensure that its children are lis when is rendered as an ul or an ol.


<Stack as="ul">
  <div>Foo</div>
  <div>Bar</div>
  <div>Baz</div>
</Stack>

Name	Type(s)	Default	Required
direction	"row" "column"	column
spacing	"xxs" "xs" "sm" "md" "lg" "xl" "xxl"	md