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 與 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 間距

若要使用 flexbox gap 進行間距實作，請將 `useFlexGap` 屬性設為 true。

這會移除使用 CSS 巢狀選取器的預設實作的已知限制。然而，CSS flexbox 間距在某些瀏覽器中尚未完全支援。

我們建議在使用前查看支援百分比。

項目 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",
  }}
>

系統屬性

限制

子元素的邊距

預設情況下，不支援自訂子元素的邊距。

例如，以下 `Button` 元件的頂部邊距將被忽略。

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

white-space: nowrap

彈性項目的初始設定為 `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

請參閱以下文件，以取得此處提及元件的所有屬性和類別的完整參考。