Root, List, Trigger

Radix UI — это низкоуровневая библиотека компонентов для React, ориентированная на доступность и расширяемость. Основой для большинства интерактивных элементов служат три ключевых компонента: Root, List и Trigger. Их понимание необходимо для построения сложных пользовательских интерфейсов с меню, селекторами и раскрывающимися списками.

Root

Root является корневым контейнером для большинства компонентов Radix UI. Он обеспечивает контекст, через который вложенные элементы взаимодействуют между собой.

Основные особенности Root:

  • Контекст управления состоянием — хранит текущее состояние раскрытия элементов (открыт/закрыт).
  • События глобального уровня — Root слушает клики вне компонента и клавиши Escape, чтобы корректно закрывать меню или диалоги.
  • Аксессибилити — Root управляет фокусом и поддерживает правильные aria-атрибуты для вложенных элементов.

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

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Меню</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Пункт 1</DropdownMenu.Item>
    <DropdownMenu.Item>Пункт 2</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Здесь Root оборачивает все элементы меню, включая Trigger и Content, обеспечивая управление состоянием открытия.

Trigger

Trigger — это элемент, который инициирует открытие или закрытие компонента внутри Root. Обычно это кнопка, иконка или любой интерактивный элемент.

Ключевые моменты Trigger:

  • Управление состоянием — автоматически синхронизируется с Root. При клике Trigger открывает/закрывает меню.
  • Аксессибилити — имеет правильные aria-haspopup, aria-expanded и поддержку клавиатуры по стандартам WAI-ARIA.
  • Flexibility — может быть обернут любым элементом или кастомизирован стилями, не нарушая функциональность.

Пример кастомного Trigger:

<DropdownMenu.Trigger asChild>
  <button className="custom-button">Открыть меню</button>
</DropdownMenu.Trigger>

Использование asChild позволяет использовать собственный компонент вместо стандартного, сохраняя все встроенные возможности Radix UI.

List

List представляет собой контейнер для элементов выбора внутри меню или селектора. Он может использоваться как Content в DropdownMenu или Items в Select.

Особенности List:

  • Вложенные элементы — List может содержать Item, CheckboxItem, RadioItem и другие типы элементов.
  • Keyboard Navigation — автоматически поддерживает навигацию стрелками, Home/End и Enter для выбора.
  • Focus Management — при открытии фокус ставится на первый элемент или на выбранный по умолчанию.
  • Стилизация — можно легко кастомизировать через CSS или Tailwind, не ломая функциональность.

Пример List в DropdownMenu:

<DropdownMenu.Content>
  <DropdownMenu.Item>Пункт A</DropdownMenu.Item>
  <DropdownMenu.Item disabled>Пункт B (неактивен)</DropdownMenu.Item>
  <DropdownMenu.Item>Пункт C</DropdownMenu.Item>
</DropdownMenu.Content>

Здесь Content действует как контейнер List, а каждый Item автоматически получает навигацию и управление фокусом.

Взаимодействие Root, Trigger и List

  • Root обеспечивает глобальный контекст и управление состоянием.
  • Trigger инициирует действия, изменяя состояние Root.
  • List/Content реагирует на изменения состояния Root, отображая или скрывая элементы.

Благодаря такому разделению ответственности компоненты Radix UI остаются полностью контролируемыми, доступными и расширяемыми. Например, можно создать кастомное меню с иконками, радиокнопками и чекбоксами, полностью используя Root для состояния, Trigger для открытия и List для структурирования элементов:

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Настройки</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Профиль</DropdownMenu.Item>
    <DropdownMenu.CheckboxItem checked>
      Уведомления
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.RadioGroup value="dark">
      <DropdownMenu.RadioItem value="light">Светлая тема</DropdownMenu.RadioItem>
      <DropdownMenu.RadioItem value="dark">Тёмная тема</DropdownMenu.RadioItem>
    </DropdownMenu.RadioGroup>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Такой подход позволяет создавать сложные интерфейсы с минимальным количеством кода и гарантированной доступностью.

Хотя Root, Trigger и List выглядят как простые строительные блоки, их комбинация позволяет реализовывать полностью интерактивные и управляемые компоненты с поддержкой клавиатуры, фокуса и корректных ARIA-атрибутов. Это делает Radix UI идеальной основой для создания кастомных меню, селекторов и всплывающих элементов интерфейса в React.

Оглавление