Stack
The
Stack
component is the basic layout component, used to build horizontal and vertical flows,
grids, dashboards, etc...For information about views layouts in general as well as common layout patterns, see
Layout.
Columns (vertical)
By default, a stack renders components in a vertical flow with spacing in between.
To force a stack to scroll, add a max height and scroll bars will automatically appear.
Rows (horizontal)
A stack can render components in a horizontal flow by setting
direction="row"
If the components in a row stack grow too large to fit in a row, they will wrap around onto the next
row.
Spacing
Use the
spacing
prop to configure the amount of space between each item of the stack.Grow
By default, components in a stack will fit their content. To force components to grow to fill all
horizontal or vertical space set the
grow
prop.Justify
Justify defines the alignment across the main axis (the horizontal axis for a horizontal stack and
the vertical axis for a vertical stack).
Align
Align defines the alignment across the cross axis (the vertical axis for a horizontal stack and the
horizontal axis for a vertical stack).
Configuring stack children
You can customize the width and offset of a component that is a direct child of a stack.
width
and offset
only work on Airplane components that are direct children of a <Stack>
. If
you want to set these props on custom components, see
Setting the width and offset of a custom component.Width
If you need more control over a component's width, set the
width
prop on a component that is a
direct child of a <Stack>
. width
can take a few values:content
(default): The component fits its content.auto
: The component grows to fit available space. All components in a given row with withauto
will be the same size as long as there is enough room to fit their content.- numerical size: The share of the row that the component takes up as a percentage (e.g. "50%"), a fraction (e.g. "1/2") or a number in a 12 column grid (e.g. 6).
Offset
You can offset a component that is a direct child of a
<Stack>
using the same units as width
(percentage, fraction, or number of 12 column grid). The offset is added to the left of the
component.Responsive widths
To customize layouts for different size screens, you can set breakpoints in a component's width or
offset. Both the
width
and offset
props can take an object that specifies the value for a
particular screen size and above.Available breakpoints include:
xs
: 0px and upsm
: 768px and upmd
: 992px and uplg
: 1200px and upxl
: 1400px and up
A breakpoint matches if the screen size is greater than or equal to the breakpoint. The largest
breakpoint that matches is applied.
For example, A 1000px screen matches
xs
, sm
and md
. If you set the width of a component to
{xs: 100%, md: 50%}
, the md
value will be chosen since it is the largest breakpoint that
matches.In the following example, each component has a 33% width if the screen is size
sm
or larger, and
100% if the screen is size xs
. Try decreasing the size of your window and watch the components
expand to fill 100% of the row.Remember that if the components in a row stack grow too large to fit in a row, they will
automatically wrap around onto the next row. Breakpoints are not always necessary because this
wrapping behavior ensures that content fits even if breakpoints are not set.
Setting the width and offset of a custom component
If you want to set the width or offset of a custom component that is a direct child of a
<Stack>
,
you can wrap the component in a <Stack.Item>
.This works for built in React components (like
<div>
), third party components, or your own custom
components.Component API
Name | Description | Default |
---|---|---|
children | Component Items of the stack. To specify custom spacing, breakpoints, or offset, use <Stack.Item>. | |
direction | "row" | "column" Direction of the stack. | column |
justify | "start" | "end" | "center" | "space-between" | "space-around" Position of the stack on the vertical axis for column stacks and the horizontal axis for row stacks. | start |
align | "start" | "end" | "center" | "stretch" Alignment of the stack on the horizontal axis for column stacks and the vertical axis for row stacks. | stretch |
spacing | number | "xs" | "sm" | "md" | "lg" | "xl" Spacing between items of the stack. | md |
grow | boolean Grow the items of the stack to fill the available space. | false |
sx | CSSObject CSS style overrides. | |
className | string A string representing the class of the element. | |
width | number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; } Width of the component. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up
the entire row, 6 is half, 1 is 1/12.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row.
content indicates that the component should take up as much space as its content.
auto indicates that the component should take any leftover space on the row.
To set width based on the screen size, use an object with a specific width for each breakpoint.
e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%. | content |
offset | number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; } Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row.
To set offset based on the screen size, use an object with a specific offset for each breakpoint.
e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%. |