跳转到内容
编辑此页面

Toggle Button 切换按钮

Toggle Buttons 可用于对相关选项进行分组。

为了强调组合之间的关联，每一组 Toggle buttons 应该共享一个容器。

The ToggleButtonGroup will control the selected state of its child buttons when given its own value prop.

Exclusive Selection

Text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time. Selecting one option deselects any other.

Multiple Selection

Logically-grouped options, like Bold, Italic, and Underline, allow multiple options to be selected.

尺寸

想要更大或更小的按钮？ 你可以使用 size 属性。

Enforce value set

If you want to enforce at least one button to be active, you can adapt your handleChange function.

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

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

Standalone toggle button

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

Customized toggle button

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

可访问性

ToggleButtonGroup has role="group". You should provide an accessible label with aria-label="label", aria-labelledby="id" or <label>.

ToggleButton sets aria-pressed="<bool>" according to the button state. You should label each button with aria-label.

API