ToggleButton и ToggleButtonGroup

ToggleButton и ToggleButtonGroup — это компоненты библиотеки MUI, предназначенные для создания кнопок-переключателей и групп связанных кнопок, где можно управлять состоянием выбора. Они часто применяются для выбора между несколькими вариантами, фильтрации данных или настройки пользовательского интерфейса.

ToggleButton

ToggleButton представляет собой кнопку, которая может находиться в двух состояниях: активном (выбранном) и неактивном. Состояние управляется через проп selected.

Пример базового использования:

import ToggleButton from '@mui/material/ToggleButton';

function Example() {
  const [selected, setSelected] = React.useState(false);

  const handleToggle = () => {
    setSelected(!selected);
  };

  return (
    <ToggleButton
      value="check"
      selected={selected}
      onCha nge={handleToggle}
    >
      Опция
    </ToggleButton>
  );
}

Ключевые пропсы ToggleButton:

  • value — уникальное значение кнопки, используется в группе.
  • selected — булево значение, определяющее активность кнопки.
  • onChange — функция, вызываемая при изменении состояния кнопки.
  • disabled — отключает кнопку.
  • size — управляет размером кнопки (small, medium, large).
  • color — цвет кнопки (standard, primary, secondary, error, info, success, warning).

ToggleButtonGroup

ToggleButtonGroup предназначен для объединения нескольких кнопок ToggleButton в логическую группу. Группа может поддерживать как одиночный выбор (exclusive), так и множественный выбор.

Пример использования с одиночным выбором:

import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';

function Example() {
  const [alignment, setAlignment] = React.useState('left');

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

  return (
    <ToggleButtonGroup
      value={alignment}
      exclusive
      onCha nge={handleAlignment}
      aria-label="Выравнивание"
    >
      <ToggleButton value="left" aria-label="Слева">
        Слева
      </ToggleButton>
      <ToggleButton value="center" aria-label="По центру">
        По центру
      </ToggleButton>
      <ToggleButton value="right" aria-label="Справа">
        Справа
      </ToggleButton>
    </ToggleButtonGroup>
  );
}

Пропсы ToggleButtonGroup:

  • value — текущее выбранное значение (или массив значений для множественного выбора).
  • exclusive — булево значение. Если true, разрешает выбрать только одну кнопку.
  • onChange — функция обратного вызова, вызываемая при изменении выбора.
  • orientation — ориентация группы (horizontal или vertical).
  • size — размер всех кнопок в группе.
  • color — цвет всех кнопок в группе.
  • disabled — отключает все кнопки группы.

Множественный выбор

Для реализации множественного выбора exclusive устанавливать не нужно. Значение группы должно быть массивом выбранных значений:

const [formats, setFormats] = React.useState([]);

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

<ToggleButtonGroup
  value={formats}
  onCha nge={handleFormat}
>
  <ToggleButton value="bold">Жирный</ToggleButton>
  <ToggleButton value="italic">Курсив</ToggleButton>
  <ToggleButton value="underlined">Подчёркнутый</ToggleButton>
</ToggleButtonGroup>

Если кнопка уже выбрана, её повторный клик снимает выделение, что позволяет динамически управлять состоянием массива.

Стилизация и кастомизация

Стилизация через sx и styled:

  • sx позволяет быстро применять стили:
<ToggleButton sx={{ borderRadius: 2, borderColor: 'primary.main' }}>
  Кастом
</ToggleButton>
  • styled позволяет создавать полностью кастомные кнопки с переопределением состояния:
import { styled } from '@mui/material/styles';
import ToggleButton from '@mui/material/ToggleButton';

const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
  borderRadius: '12px',
  '&.Mui-selected': {
    backgroundColor: theme.palette.success.main,
    color: '#fff',
  },
  '&:hover': {
    backgroundColor: theme.palette.success.light,
  },
}));

Доступность (Accessibility)

  • Использование aria-label и aria-pressed помогает создать доступный интерфейс.
  • Для групп рекомендуется использовать ToggleButtonGroup с aria-label для семантической идентификации группы кнопок.
  • Поддерживается навигация с клавиатуры: стрелками можно перемещаться между кнопками в группе.

Полезные приёмы

  1. Динамическое управление выбором: хранить состояние в React и передавать его через value и onChange.
  2. Комбинированное использование с другими компонентами: ToggleButton можно применять внутри Toolbar, Paper или Card для создания интерактивных панелей.
  3. Управление множеством групп: каждая группа должна иметь уникальное value и отдельный onChange, чтобы избежать конфликта состояний.
  4. Анимации и кастомные эффекты: через sx и styled можно создавать плавное изменение цвета и масштаба при переключении.

ToggleButton и ToggleButtonGroup предоставляют гибкий и мощный инструмент для управления состояниями выбора в интерфейсе. Сочетание простоты использования с высокой кастомизацией делает их незаменимыми для построения интерактивных панелей управления и фильтров в приложениях на React.

Оглавление