Stack

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

简介

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

项目 1

项目 2

项目 3

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

基础用法

import Stack from '@mui/joy/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 与 Grid 的对比

Stack 适用于一维布局，而当您需要垂直和水平排列时，Grid 是更佳选择。

自定义

Direction（方向）

默认情况下，Stack 组件以垂直列的方式排列项目。使用 direction 属性可以水平行的方式排列项目

项目 1

项目 2

项目 3

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

<Stack direction="row" spacing={1}>
  <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" />}
  spacing={2}
  sx={{ justifyContent: 'center' }}
>
  <Item>Item 1</Item>
  <Item>Item 2</Item>
  <Item>Item 3</Item>
</Stack>

<Stack
  direction="row"
  divider={<Divider orientation="vertical" />}
  spacing={2}
  sx={{ justifyContent: 'center' }}
>
  <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 间隙

要使用 flexbox gap 来实现间距，请将 useFlexGap 属性设置为 true。它会移除使用 CSS 嵌套选择器的默认实现的已知限制。

项目 1

项目 2

长内容

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

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

按 Enter 键开始编辑

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

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
import Stack from '@mui/joy/Stack';

const theme = extendTheme({
  components: {
    JoyStack: {
      defaultProps: {
        useFlexGap: true,
      },
    },
  },
});

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

系统属性

局限性

子元素的 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 variant="outlined" 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 variant="outlined" 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 variant="outlined" 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 variant="outlined" 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

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

<Stack />