跳转到内容

Toggle Button 切换按钮

切换按钮组件可用于对相关选项进行分组。

为了强调相关 切换按钮的关联,每一个组应该共享一个容器。 当给定切换按钮的 value 属性时,ToggleButtonGroup 就可以控制其子按钮的选择状态(selected state)。

唯一的选择

文本对齐的切换按钮提供了 left,right,center,full 和 justified 的选项,但是每次只能选择一个项目。 选择一个选项则会取抵消其他的选项。

多选

有一些逻辑分组 (Logically-grouped) 的选项,如粗体,斜体和下划线,则允许同时选择多个选项。

<ToggleButtonGroup value={formats} onChange={handleFormat} aria-label="text formatting">
  <ToggleButton value="bold" aria-label="bold">
    <FormatBoldIcon />
  </ToggleButton>
  <ToggleButton value="italic" aria-label="italic">
    <FormatItalicIcon />
  </ToggleButton>
  <ToggleButton value="underlined" aria-label="underlined">
    <FormatUnderlinedIcon />
  </ToggleButton>
  <ToggleButton value="color" aria-label="color" disabled>
    <FormatColorFillIcon />
    <ArrowDropDownIcon />
  </ToggleButton>
</ToggleButtonGroup>

尺寸

您想要一个大一点或者小一点的按钮吗? 试着使用 size 属性吧。

垂直排列的按钮

<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>

强制设置值

如果您想约束至少一个按钮处于活动状态,请尝试调整 handleChange 函数。

const handleFormat = (event, newFormats) => {
  if (newFormats.length) {
    setFormats(newFormats);
  }
};

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

单独的切换按钮

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

自定义切换按钮

以下是自定义组件的一个示例。 您可以在重写文档页中了解有关此内容的更多信息。


无障碍设计

  • ToggleButtonGroup 具有 role="group"。 请您提供一个可访问的标签,标签包含 aria-label="label"aria-labelledby="id"<label>
  • ToggleButton 根据按钮的状态来设置 aria-pressed="<bool>"。 您应该用 aria-label 标记每个按钮。