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 vs. Grid

Stack 非常適合一維佈局，而當您需要垂直和水平排列時，Grid 則更為適合。

自訂

方向

預設情況下，Stack 以垂直欄排列項目。使用 direction 屬性將項目水平定位於 row 中

項目 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 />