1 | ---
|
2 | title: Stack
|
3 | storybookPath: page-layout-stack--default
|
4 | isExperimentalPackage: false
|
5 | ---
|
6 |
|
7 | Used 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 |
|
21 | The 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 |
|
50 | Items 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 |
|
74 | Use the `dividers` property to render a [Divider](/package/divider) between each
|
75 | element 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 |
|
87 | Nest 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 |
|
113 | Extra 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
|