Separator и Toggle Group

Separator в Radix UI используется для визуального и семантического разделения элементов интерфейса. Он обеспечивает доступность и консистентность в интерфейсах, сохраняя при этом контроль над стилем и поведением.

Основные свойства

  • orientation — определяет направление линии. Принимает значения "horizontal" (по умолчанию) и "vertical".
  • asChild — позволяет использовать собственный компонент вместо стандартного div, сохраняя поведение Separator.
  • className — добавление кастомных CSS-классов для стилизации.
  • decorative — булево свойство, указывающее, что Separator носит чисто декоративный характер и не требует озвучивания скринридерами.

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

import * as Separator from '@radix-ui/react-separator';

<Separator.Root className="my-separator" orientation="horizontal" />
<Separator.Root orientation="vertical" className="mx-2 h-6 bg-gray-300" />
  • Горизонтальный Separator обычно используется между блоками контента или секциями.
  • Вертикальный Separator удобно применять внутри инструментальных панелей, меню или списков кнопок.

Доступность

Radix UI автоматически добавляет правильные role и aria-orientation атрибуты. Для декоративных линий можно задать decorative={true}, чтобы скринридеры игнорировали их.

Кастомизация

  • Цвет и толщина: через CSS свойства background-color и height или width.
  • Маргин и паддинг: Separator не имеет собственного внешнего отступа, поэтому маргин задается через классы.
  • Анимация: можно добавлять transition для плавного появления или изменения размеров.

Toggle Group

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

Основные компоненты

  • ToggleGroup.Root — контейнер группы. Свойства:

    • type — "single" (выбор одного) или "multiple" (выбор нескольких).
    • value / defaultValue — текущее выбранное значение или массив значений.
    • onValueChange — callback при изменении состояния.

  • ToggleGroup.Item — отдельная кнопка внутри группы. Свойства:

    • value — уникальный идентификатор элемента.
    • disabled — блокировка выбора.
    • aria-label — описание для доступности.

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

Выбор одного значения:

import * as ToggleGroup from '@radix-ui/react-toggle-group';

<ToggleGroup.Root type="single" value={selected} onValueCha nge={setSelected}>
  <ToggleGroup.Item value="left" className="btn">Левый</ToggleGroup.Item>
  <ToggleGroup.Item value="center" className="btn">Центр</ToggleGroup.Item>
  <ToggleGroup.Item value="right" className="btn">Правый</ToggleGroup.Item>
</ToggleGroup.Root>

Выбор нескольких значений:

<ToggleGroup.Root type="multiple" value={selectedItems} onValueCha nge={setSelectedItems}>
  <ToggleGroup.Item value="bold" className="btn">Жирный</ToggleGroup.Item>
  <ToggleGroup.Item value="italic" className="btn">Курсив</ToggleGroup.Item>
  <ToggleGroup.Item value="underline" className="btn">Подчёркнутый</ToggleGroup.Item>
</ToggleGroup.Root>

Управление состоянием

  • Controlled vs Uncontrolled: value и onValueChange позволяют полностью контролировать состояние из родительского компонента. defaultValue подходит для локального состояния без внешнего контроля.

  • Тип single: гарантирует, что всегда выбран ровно один элемент. При необходимости можно разрешить отсутствие выбора, передав allowEmpty={true}.

  • Тип multiple: позволяет выбирать несколько элементов одновременно, возвращая массив выбранных value.

Стилизация и анимации

  • Активное состояние: можно задавать через CSS-псевдоклассы [data-state="on"] и [data-state="off"].
  • Фокус: Radix UI автоматически добавляет фокусные стили для клавиатурной навигации.
  • Композиция с другими компонентами: Toggle Group легко интегрируется с Separator для визуального разделения кнопок или групп.

Доступность

  • Кнопки внутри Toggle Group имеют корректные aria-pressed атрибуты, обеспечивая поддержку скринридеров.
  • Контейнер Root с типом single управляет поведением клавиш ArrowLeft и ArrowRight для навигации между элементами.

Radix UI Separator и Toggle Group обеспечивают простое, но гибкое решение для структурирования интерфейсов и организации интерактивных элементов, сочетая высокую доступность, контроль состояния и легкую кастомизацию через CSS и JSX.

Оглавление