UNPKG

2.56 kBMarkdownView Raw
1---
2title: Stack
3storybookPath: page-layout-stack--default
4isExperimentalPackage: false
5---
6
7Used to distribute children vertically, with even spacing between each child.
8
9```jsx live
10<Stack gap="large">
11 <Placeholder />
12 <Placeholder />
13 <Placeholder />
14</Stack>
15```
16
17## Examples
18
19### Gap
20
21The spacing between children can be adjusted using the `gap` prop.
22
23```jsx live
24<Columns gap="xxlarge">
25 <Stack gap="small">
26 <Placeholder />
27 <Placeholder />
28 <Placeholder />
29 </Stack>
30 <Stack gap="medium">
31 <Placeholder />
32 <Placeholder />
33 <Placeholder />
34 </Stack>
35 <Stack gap="large">
36 <Placeholder />
37 <Placeholder />
38 <Placeholder />
39 </Stack>
40 <Stack gap="xlarge">
41 <Placeholder />
42 <Placeholder />
43 <Placeholder />
44 </Stack>
45</Columns>
46```
47
48### Horizontal alignment
49
50Items can be aligned horizontally using the `align` prop.
51
52```jsx live
53<Stack gap="medium" dividers>
54 <Stack gap="small" align="left">
55 <Placeholder />
56 <Placeholder label="left" width={128} />
57 <Placeholder />
58 </Stack>
59 <Stack gap="small" align="center">
60 <Placeholder />
61 <Placeholder label="center" width={128} />
62 <Placeholder />
63 </Stack>
64 <Stack gap="small" align="right">
65 <Placeholder />
66 <Placeholder label="right" width={128} />
67 <Placeholder />
68 </Stack>
69</Stack>
70```
71
72### Dividers
73
74Use the `dividers` property to render a [Divider](/package/divider) between each
75element in the Stack.
76
77```jsx live
78<Stack gap="medium" dividers>
79 <Text>First item</Text>
80 <Text>Second item</Text>
81 <Text>Third item</Text>
82</Stack>
83```
84
85### Nesting
86
87Nest Stack components to create more complex white space rules.
88
89```jsx live
90<Stack gap="xlarge">
91 <Heading level="4">Heading</Heading>
92 <Stack gap="small">
93 <Text>Line 1</Text>
94 <Text>Line 2</Text>
95 <Text>Line 3</Text>
96 </Stack>
97 <Stack gap="small">
98 <Text>Line 1</Text>
99 <Text>Line 2</Text>
100 <Text>Line 3</Text>
101 </Stack>
102</Stack>
103```
104
105## Props
106
107<PropsTable displayName="Stack" />
108
109`Stack` props also include [`Box`](/package/box) props and are not listed here
110(excludes `display`, `className`, `alignItems`, `flexDirection`,
111`justifyContent` and `flexWrap`).
112
113Extra props are also passed into the underlying [`Box`](/package/box) component.
114
115[align]:
116 https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/stack/src/Stack.tsx#L24
117[data-attribute-map]:
118 https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1