Stack

Stack 是一个容器组件，用于垂直或水平排列元素。

简介

Stack 组件管理其直接子元素沿垂直或水平轴的布局，并可在每个子元素之间添加可选的间距和分隔线。

基础知识

import Stack from '@mui/material/Stack';

Stack 组件充当通用容器，包裹要排列的元素。

使用 spacing 属性来控制子元素之间的间距。间距值可以是任何数字（包括小数）或字符串。（该属性使用 theme.spacing() 助手函数转换为 CSS 属性。）

项目 1

项目 2

项目 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>

按 Enter 开始编辑

Stack vs. Grid

Stack 专注于一维布局，而 Grid 处理二维布局。默认方向是 column，它会垂直堆叠子元素。

方向

默认情况下，Stack 以列的形式垂直排列项目。使用 direction 属性以行的形式水平放置项目

项目 1

项目 2

项目 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>

按 Enter 开始编辑

分隔线

使用 divider 属性在每个子元素之间插入一个元素。这与 Divider 组件配合使用效果特别好，如下所示

项目 1

项目 2

项目 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>

按 Enter 开始编辑

响应式值

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

项目 1

项目 2

项目 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>

按 Enter 开始编辑

Flexbox gap

要使用 flexbox gap 来实现间距，请将 useFlexGap 属性设置为 true。

它消除了使用 CSS 嵌套选择器的默认实现的已知限制。但是，CSS flexbox gap 在某些浏览器中尚未完全支持。

我们建议在使用前查看支持百分比。

项目 1

项目 2

长内容

<Stack
  spacing={{ xs: 1, sm: 2 }}
  direction="row"
  useFlexGap
  sx={{ flexWrap: 'wrap' }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Long content</Item>
</Stack>

<Stack
  spacing={{ xs: 1, sm: 2 }}
  direction="row"
  useFlexGap
  sx={{ flexWrap: 'wrap' }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Long content</Item>
</Stack>

按 Enter 开始编辑

要将该属性设置为所有 Stack 实例，请使用默认属性创建一个主题

import { ThemeProvider, createTheme } from '@mui/material/styles';
import Stack from '@mui/material/Stack';

const theme = createTheme({
  components: {
    MuiStack: {
      defaultProps: {
        useFlexGap: true,
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Stack>…</Stack> {/* uses flexbox gap by default */}
    </ThemeProvider>
  );
}

交互式演示

下面是一个交互式演示，可让您探索不同设置的视觉效果

项目 1

项目 2

项目 3

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

系统属性

局限性

子元素的 margin

默认情况下不支持自定义子元素的 margin。

例如，下面 Button 组件的 top-margin 将被忽略。

<Stack>
  <Button sx={{ marginTop: '30px' }}>...</Button>
</Stack>

white-space: nowrap

flex 项目的初始设置是 min-width: auto。当子元素使用 white-space: nowrap; 时，这会导致定位冲突。您可以使用以下代码重现此问题

<Stack direction="row">
  <Typography noWrap>

为了使项目保持在容器内，您需要设置 min-width: 0。

<Stack direction="row" sx={{ minWidth: 0 }}>
  <Typography noWrap>

截断应有条件地应用于此长文本行，因为此行比容器可以支持的行长得多。

<Item sx={{ my: 1, mx: 'auto', p: 2 }}>
  <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
    <Avatar>W</Avatar>
    <Typography noWrap>{message}</Typography>
  </Stack>
</Item>
<Item sx={{ my: 1, mx: 'auto', p: 2 }}>
  <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
    <Stack>
      <Avatar>W</Avatar>
    </Stack>
    <Stack sx={{ minWidth: 0 }}>
      <Typography noWrap>{message}</Typography>
    </Stack>
  </Stack>
</Item>

<Item sx={{ my: 1, mx: 'auto', p: 2 }}>
  <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
    <Avatar>W</Avatar>
    <Typography noWrap>{message}</Typography>
  </Stack>
</Item>
<Item sx={{ my: 1, mx: 'auto', p: 2 }}>
  <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
    <Stack>
      <Avatar>W</Avatar>
    </Stack>
    <Stack sx={{ minWidth: 0 }}>
      <Typography noWrap>{message}</Typography>
    </Stack>
  </Stack>
</Item>

按 Enter 开始编辑

解剖结构

Stack 组件由单个根 <div> 元素组成

<div class="MuiStack-root">
  <!-- Stack contents -->
</div>

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。