Stack

Stack 是一個容器元件，用於垂直或水平排列元素。

介紹

Stack 元件沿著垂直或水平軸管理其直接子元素的佈局，並在每個子元素之間可選擇性地加入間距和分隔線。

基礎

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

Stack 元件作為通用容器，包裝要排列的元素。

使用 spacing 屬性來控制子元素之間的間距。spacing 值可以是任何數字，包括小數，或字串。(該屬性會使用 theme.spacing() helper 轉換為 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 會以 column 垂直排列項目。使用 direction 屬性以 row 水平排列項目

項目 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 屬性在每個子元素之間插入一個元素，如下所示

項目 1

項目 2

項目 3

響應式數值

您可以根據活動的斷點切換 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 鍵開始編輯

互動式範例

以下是一個互動式範例，可讓您探索不同設定的視覺結果

項目 1

項目 2

項目 3

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

系統屬性

限制

子元素的 Margin

預設情況下不支援自訂子元素的 margin。

例如，下方按鈕元件的 top-margin 將會被忽略。

<Stack>
  <button style={{ marginTop: '30px' }}>...</button>
</Stack>

white-space: nowrap

flex 項目上的初始設定為 min-width: auto。當子元素使用 white-space: nowrap; 時，這會導致定位衝突。您可以使用 ... 重現此問題

<Stack direction="row">
  <span style={{ whiteSpace: 'nowrap' }}>

為了讓項目保持在容器內，您需要設定 min-width: 0。

<Stack direction="row" sx={{ minWidth: 0 }}>
  <span style={{ whiteSpace: 'nowrap' }}>

剖析

Stack 元件由單一個根 <div> 元素組成

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

API

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

<Stack />