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

<Stack spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

<Stack spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

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

<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

<Stack direction="row" spacing={2}>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Press Enter to start editing

Dividers（分隔线）

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

Item 1

Item 2

Item 3

<Stack
  direction="row"
  divider={<Divider orientation="vertical" flexItem />}
  spacing={2}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

<Stack
  direction="row"
  divider={<Divider orientation="vertical" flexItem />}
  spacing={2}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Press Enter to start editing

响应式的值

您可以根据活动断点切换 direction 或 spacing 值。

Item 1

Item 2

Item 3

<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={{ xs: 1, sm: 2, md: 4 }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={{ xs: 1, sm: 2, md: 4 }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

Press Enter to start editing

交互式

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

Item 1

Item 2

Item 3

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

System props

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

<Stack mt={2}>

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Stack />