@elemental-ui-alpha/stack
v0.0.2
Published
The stack primitive is used to distribute items along the horizontal or vertical axis, with even spacing between the items.
Downloads
8
Readme
Stack
import { Stack } from '@elemental-ui-alpha/stack';
Gap
The gap property defines how much space there should be between each element in the stack. Available gap sizes are:
none
(default)xxsmall
xsmall
small
medium
large
xlarge
xxlarge
<Stack gap="small">
<Box background="shade" padding="xlarge" />
<Box background="dim" padding="xlarge" />
<Box background="shade" padding="xlarge" />
</Stack>
Direction
Stacks can also be distributed along the horizontal axis.
Note that items within a "horizontal" stack will not wrap. If you need items to
wrap, consider using the Cluster
layout primitive.
<Stack gap="small" direction="horizontal">
<Box background="shade" padding="xlarge" />
<Box background="dim" padding="xlarge" />
<Box background="shade" padding="xlarge" />
</Stack>
Dividers
Use the dividers property to separate each element in the stack with a divider. Available divider options are:
none
(default)between
around
start
end
<Stack gap="small" dividers="between">
<Box>first</Box>
<Box>second</Box>
<Box>third</Box>
</Stack>