Перейти к контенту
Редактировать эту страницу

Toggle Buttons

Toggle buttons can be used to group related options.

To emphasize groups of related Toggle buttons, a group should share a common container. The ToggleButtonGroup controls the selected state of its child buttons when given its own value prop.

Exclusive selection

С исключительным выделением выбор одной опции снимает выделение с остальных.

В этом примере кнопки переключения представляют варианты выравнивания текста left, center, right и fully justified text (отключено), с возможностью выбора лишь одного элемента.

Multiple selection

Множественное выделение позволяет выбрать несколько вариантов из логически связанных опций, таких как bold, italic, и underline.

Размеры

Fancy larger or smaller buttons? Use the size property.

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

Vertical buttons

Кнопки можно выстроить вертикально задав свойству 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>

Enforce value set

Если вы хотите, чтобы по крайней мере одна кнопка была активной, то можете адаптировать под себя функцию handleChange.

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

Ниже находится пример кастомизации компонента. You can learn more about this in the overrides documentation page.

Доступность

ARIA

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

Keyboard

В настоящее время кнопки переключения расположены в порядке DOM. Для перемещения между ними используйте клавишу табуляции. Поведение кнопки следует стандартной семантике клавиатуры.

API