Stack
[axStack] lays its children out along one axis (vertical by default) with a consistent gap. Switch
direction="horizontal" for a row.
Import
Section titled “Import”import { AxStackDirective } from '@axisui-ng/primitives';<div axStack gap="4" align="stretch"> <div>One</div> <div>Two</div></div>
<div axStack direction="horizontal" gap="2" align="center" justify="between">…</div>Inputs
Section titled “Inputs”| Input | Type | Default | Notes |
|---|---|---|---|
direction | 'vertical' | 'horizontal' | 'vertical' | Main axis (flex-col / flex-row). |
gap | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '4' | Spacing token between children. |
align | 'start' | 'center' | 'end' | 'stretch' | 'baseline' | 'stretch' | Cross-axis alignment (align-items). |
justify | 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'start' | Main-axis distribution (justify-content). |
wrap | boolean | false | Allow wrapping along the main axis. |
Accessibility
Section titled “Accessibility”Presentational only. For a wrapping row of hugging items, prefer Cluster.
Storybook
Section titled “Storybook”Interactive examples live in Storybook under Primitives / Stack. Run pnpm storybook to explore them.