Stack

Arranges children in a vertical or horizontal flex container with consistent spacing.

import { ... } from '@corndev/ui'

HTML

No JavaScript required — these classes are the whole component.

<div class="corn-stack" data-direction="vertical" data-gap="md">
  <div>First</div>
  <div>Second</div>
</div>

Classes

Class
`.corn-stack`

Attributes

Attribute	Values
`data-direction`	`vertical\|horizontal`
`data-gap`	`xs\|sm\|md\|lg\|xl`
`data-align`	`start\|center\|end\|stretch`
`data-justify`	`start\|center\|end\|between\|around`

Vanilla JS

Optional. createStack only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createStack } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createStack(el, { /* options */ });

Options

Option	Type	Default
`direction`	`'vertical'\|'horizontal'`	`'vertical'`
`gap`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`'md'`
`align`	`'start'\|'center'\|'end'\|'stretch'`	`'stretch'`
`justify`	`'start'\|'center'\|'end'\|'between'\|'around'`	`'start'`

React

Stack — from @corndev/ui-react.

The props are the same as the options above, plus className.

Vertical (default)

<Stack>
  <Button>First</Button>
  <Button level="secondary">Second</Button>
  <Button level="ghost">Third</Button>
</Stack>

Horizontal

<Stack direction="horizontal">
  <Button>First</Button>
  <Button level="secondary">Second</Button>
  <Button level="ghost">Third</Button>
</Stack>

Gap sizes

<Stack direction="horizontal" gap="xs">...</Stack>
<Stack direction="horizontal" gap="sm">...</Stack>
<Stack direction="horizontal" gap="md">...</Stack>
<Stack direction="horizontal" gap="lg">...</Stack>
<Stack direction="horizontal" gap="xl">...</Stack>

Alignment

<Stack direction="horizontal" align="start">...</Stack>
<Stack direction="horizontal" align="center">...</Stack>
<Stack direction="horizontal" align="end">...</Stack>