切換按鈕

切換按鈕可以用於將相關選項分組。

為了強調相關切換按鈕的群組，群組應該共用一個通用容器。當 ToggleButtonGroup 接收到自己的 value prop 時，它會控制其子按鈕的選取狀態。

獨佔選擇

使用獨佔選擇時，選擇一個選項會取消選擇任何其他選項。

在此範例中，文字對齊切換按鈕呈現靠左、置中、靠右和完全對齊文字（已停用）的選項，一次只能選擇一個項目。

注意：獨佔選擇不會強制要求必須啟用按鈕。若要達到此效果，請參閱強制設定值。

多重選擇

多重選擇允許邏輯分組的選項（例如粗體、斜體和底線）可以選擇多個選項。

尺寸

若要使用較大或較小的按鈕，請使用 size prop。

<ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control} aria-label="Medium sizes">
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
  {children}
</ToggleButtonGroup>

<ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control} aria-label="Medium sizes">
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
  {children}
</ToggleButtonGroup>

按下 Enter 鍵開始編輯

顏色

<ToggleButtonGroup
  color="primary"
  value={alignment}
  exclusive
  onChange={handleChange}
  aria-label="Platform"
>
  <ToggleButton value="web">Web</ToggleButton>
  <ToggleButton value="android">Android</ToggleButton>
  <ToggleButton value="ios">iOS</ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup
  color="primary"
  value={alignment}
  exclusive
  onChange={handleChange}
  aria-label="Platform"
>
  <ToggleButton value="web">Web</ToggleButton>
  <ToggleButton value="android">Android</ToggleButton>
  <ToggleButton value="ios">iOS</ToggleButton>
</ToggleButtonGroup>

按下 Enter 鍵開始編輯

垂直按鈕

可以使用 orientation prop 設定為 "vertical" 來垂直堆疊按鈕。

<ToggleButtonGroup
  orientation="vertical"
  value={view}
  exclusive
  onChange={handleChange}
>
  <ToggleButton value="list" aria-label="list">
    <ViewListIcon />
  </ToggleButton>
  <ToggleButton value="module" aria-label="module">
    <ViewModuleIcon />
  </ToggleButton>
  <ToggleButton value="quilt" aria-label="quilt">
    <ViewQuiltIcon />
  </ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup
  orientation="vertical"
  value={view}
  exclusive
  onChange={handleChange}
>
  <ToggleButton value="list" aria-label="list">
    <ViewListIcon />
  </ToggleButton>
  <ToggleButton value="module" aria-label="module">
    <ViewModuleIcon />
  </ToggleButton>
  <ToggleButton value="quilt" aria-label="quilt">
    <ViewQuiltIcon />
  </ToggleButton>
</ToggleButtonGroup>

按下 Enter 鍵開始編輯

強制設定值

如果您想要強制至少必須啟用一個按鈕，您可以調整您的 handleChange 函數。

const handleAlignment = (event, newAlignment) => {
  if (newAlignment !== null) {
    setAlignment(newAlignment);
  }
};

const handleDevices = (event, newDevices) => {
  if (newDevices.length) {
    setDevices(newDevices);
  }
};

獨立切換按鈕

<ToggleButton
  value="check"
  selected={selected}
  onChange={() => setSelected((prevSelected) => !prevSelected)}
>
  <CheckIcon />
</ToggleButton>

<ToggleButton
  value="check"
  selected={selected}
  onChange={() => setSelected((prevSelected) => !prevSelected)}
>
  <CheckIcon />
</ToggleButton>

按下 Enter 鍵開始編輯

自訂

這裡有一個自訂組件的範例。您可以在覆寫文件頁面中了解更多相關資訊。

無障礙功能

ARIA

ToggleButtonGroup 具有 role="group"。您應該使用 aria-label="label"、aria-labelledby="id" 或 <label> 提供可存取的標籤。
ToggleButton 根據按鈕狀態設定 aria-pressed="<bool>"。您應該使用 aria-label 標記每個按鈕。

鍵盤

目前，切換按鈕按照 DOM 順序排列。使用 Tab 鍵在它們之間導航。按鈕行為遵循標準鍵盤語意。

API

請參閱以下文件，以完整參考此處提及的組件可用的所有 props 和類別。