Stack
The <Stack> component is a layout component that is there to stack its children. It has a flexbox context similar like the <Inline>.
The component should be used anywhere were elements are stacked one atop another. It is also possible to nest if needed.
<Stack> uses the spaces from the given theme, but you can use <Split> to add bigger spacing. You can also align the elements horizontal and vertical.
Import
import { Stack } from '@marigold/components';Props
| Property | Type | Default | Description |
|---|---|---|---|
space | ResponsiveStyleValue<string> | none | Space between the elements. |
alignX | `none, left, right, center` | none | Horizontal alignment for the children |
alignY | `none, top, bottom, center` | none | Vertical alignement for the children. |
stretch | boolean | false | Stretch to fill space (vertical AND horizontal, useful if you want to change y alignment). |
Examples
Spacing
This example shows how to use the space property. You can see the large space between the elements.
Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada, massa nec ultricies efficitur, lectus ante consequat magna, a porttitor massa ex ut quam.
Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus. Vestibulum malesuada ante eu velit malesuada, nec ultricies sapien finibus. Aenean rutrum in sem a ullamcorper. Integer ut euismod urna. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Nested
The <Stack> component can also be nested in another <Stack>. So you can build complex structures and constructs but without breaking layout.
Stack Content #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus.
Stack Content #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus.
Horizontal Alignment
The example shows the alignX prop, which is used to align the children horizontal. Options are right, center and left. Default is set to none.
Left
Center
Right
Vertical Alignment
You can use the vertical alignment just with the stretch prop when its set to true. The stretch property stretches to fill the space of the element. With the vertical align you can align the children on top, center or bottom. Default is set to none.
Lirum
Larum
Löffelstiel!