跳转到内容

Stack

Stack 组件管理沿垂直或水平轴的子组件的布局,每个子组件之间有可选的间距和/或分隔线。

使用

Stack is concerned with one-dimensional layouts, while Grid handles two-dimensional layouts. The default direction is column which stacks children vertically.

Item 1
Item 2
Item 3
Press Enter to start editing

要控制子组件之间的空间,请使用 spacing 属性。 The spacing value can be any number, including decimals and any string. The prop is converted into a CSS property using the theme.spacing() helper.

方向

默认情况下, Stack 将项目垂直安排在 column 中。 然而, direction prop 也可以用来将项目水平定位在 row 中。

Item 1
Item 2
Item 3
Press Enter to start editing

Dividers(分隔线)

使用 divider prop 在每个子节之间插入一个元素。 This works particularly well with the Divider component.

Item 1

Item 2

Item 3
Press Enter to start editing

响应式的值

您可以根据活动断点切换 directionspacing 值。

Item 1
Item 2
Item 3
Press Enter to start editing

交互式

下面是一个交互式的演示,你也可以探索不同设置下的视觉结果:

Item 1
Item 2
Item 3
direction
alignItems
justifyContent
spacing
<Stack
  direction="row"
  justifyContent="center"
  alignItems="center"
  spacing={2}
>

System props

作为一个 CSS 实用组件, Stack 支持所有 system 属性。 您可以直接在组件上使用它们作为 props。 例如,顶边距:

<Stack mt={2}>