@spark-web/row v5.0.0
title: Row storybookPath: page-layout-row--default
isExperimentalPackage: false
Used to distribute children horizontally, with even spacing between each child.
<Row gap="large">
<Placeholder />
<Placeholder />
<Placeholder />
</Row>
Examples
Gap
The spacing between children can be adjusted using the gap
prop.
<Inline gap="xxlarge">
<Row gap="small">
<Placeholder />
<Placeholder />
<Placeholder />
</Row>
<Row gap="medium">
<Placeholder />
<Placeholder />
<Placeholder />
</Row>
<Row gap="large">
<Placeholder />
<Placeholder />
<Placeholder />
</Row>
<Row gap="xlarge">
<Placeholder />
<Placeholder />
<Placeholder />
</Row>
</Inline>
Vertical alignment
Items can be aligned vertically using the alignY
prop.
<Stack gap="medium" align="center" dividers>
<Row gap="small" alignY="top">
<Placeholder />
<Placeholder label="top" height={64} width={128} />
<Placeholder />
</Row>
<Row gap="small" alignY="center">
<Placeholder />
<Placeholder label="center" height={64} width={128} />
<Placeholder />
</Row>
<Row gap="small" alignY="bottom">
<Placeholder />
<Placeholder label="bottom" height={64} width={128} />
<Placeholder />
</Row>
<Row gap="small" alignY="stretch">
<Placeholder />
<Placeholder label="stretch" height={64} width={128} />
<Placeholder />
</Row>
</Stack>
Horizontal alignment
Items can be aligned horizontally using the align
prop.
<Stack gap="medium" dividers>
<Row gap="small" align="left">
<Placeholder label="left" width={128} />
<Placeholder />
<Placeholder />
</Row>
<Row gap="small" align="center">
<Placeholder />
<Placeholder label="center" width={128} />
<Placeholder />
</Row>
<Row gap="small" align="right">
<Placeholder />
<Placeholder />
<Placeholder label="right" width={128} />
</Row>
</Stack>
Dividers
Use the dividers
property to render a Divider between each
element in the Row.
<Row gap="medium" dividers>
<Text>First item</Text>
<Text>Second item</Text>
<Text>Third item</Text>
</Row>
Props
Row
props also include Box
props and are not listed here
(excludes display
, alignItems
, flexDirection
, justifyContent
and
flexWrap
).
Extra props are also passed into the underlying Box
component.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago