Toggle Button

Toggle Button 可用于将相关选项分组。

为了强调相关 Toggle Button 的组，一个组应该共享一个公共容器。当给定自身的 value prop 时，ToggleButtonGroup 控制其子按钮的选中状态。

独占选择

使用独占选择时，选择一个选项会取消选择任何其他选项。

在此示例中，文本对齐切换按钮呈现左对齐、居中对齐、右对齐和完全对齐文本（禁用）的选项，一次只能选择一个项目。

注意：独占选择并不强制要求必须激活一个按钮。要实现该效果，请参阅强制值设置。

多项选择

多项选择允许逻辑分组的选项（如粗体、斜体和下划线）选择多个选项。

尺寸

对于较大或较小的按钮，请使用 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);
  }
};

独立 toggle button

<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 标记每个按钮。

键盘

目前，toggle button 按照 DOM 顺序排列。使用 Tab 键在它们之间导航。按钮行为遵循标准键盘语义。

API

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