跳转到内容

Toggle Button 切换按钮

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

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

唯一的选择

在唯一的选择中,选择一个选项就会取消其他的选择状态。

在这个例子中,文本对齐切换按钮渲染了左、中、右和完全对齐文本(禁用)的选项,每次只有一个项目可供选择。

多选

多选允许使用逻辑分组的选项,如粗体、斜体和下划线,这可以选择多个选项。

尺寸

您想要一个大一点或者小一点的按钮吗? 我们提供了 size 这个属性供您调整。

<ToggleButtonGroup size="small" {...control}>
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control}>{children}</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control}>
  {children}
</ToggleButtonGroup>

垂直排列的按钮

orientation 属性设置为 "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>

强制设置值

如果你想要至少一个按钮必须是强制选中状态的,那么你可以调整你的 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>

自定义切换按钮

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


无障碍设计

ARIA

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

键盘输入

目前,切换按钮是按 DOM 顺序排列的。 可以用 tab 键在它们之间进行导航切换。 按钮的行为遵循标准键盘语义。