Split
Helper to separate items along a single axis. Split takes no children and composes with <Stack>, <Row> or any CSS flexbox context.
Props API
| Prop | Type | Default value |
|---|---|---|
gap | Gap<string | number> | — |
asChild | boolean | — |
orientation | "row" | "column" | — |
bleed | string | number | — |
bleedTop | Padding<string | number> | — |
bleedRight | Padding<string | number> | — |
bleedBottom | Padding<string | number> | — |
bleedLeft | Padding<string | number> | — |
xAlign | JustifyContent | — |
yAlign | AlignItems | — |
import { Split, SplitProps, splitStyles } from '@christiankaindl/lyts'
Split takes no children and composes nicely with both Stack and Row, to act as a sort of free space inhabitor. Compared to using justify-content (or the aliased xAlign) with the value "space-between", Split doesn't require any extra wrapping elements.
See Row for more complete usage.