Root, List, Item, Trigger

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

Root

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

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

  • defaultValue — задаёт начальное выбранное значение.
  • value — контролируемое значение для синхронизации состояния извне.
  • onValueChange — колбэк, вызываемый при изменении выбранного значения.
  • disabled — делает все вложенные элементы неактивными.
import * as Sel ect fr om '@radix-ui/react-select';

<Select.Root defaultValue="apple">
  ...
</Select.Root>

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

List

List представляет собой контейнер для множества элементов (Item). Он управляет визуальным расположением элементов и их интерактивностью. Основной задачей List является предоставление пространства для выбора и поддержка навигации с клавиатуры.

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

  • Оборачивает все дочерние Item.
  • Управляет прокруткой при большом количестве элементов.
  • Поддерживает aria-атрибуты для доступности.
<Select.Content>
  <Select.Viewport>
    <Select.Item value="apple">Apple</Select.Item>
    <Select.Item value="banana">Banana</Select.Item>
    <Select.Item value="cherry">Cherry</Select.Item>
  </Select.Viewport>
</Select.Content>

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

Item

Item — это отдельный интерактивный элемент внутри List. Он представляет конкретный вариант выбора и поддерживает различные состояния: выделение, фокус, активация.

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

  • value — уникальный идентификатор элемента.
  • disabled — делает элемент неактивным.
  • Поддержка клавиатурной навигации через стрелки.
  • Обеспечение доступности с помощью role="option" и aria-selected.
<Select.Item value="apple">
  <Select.ItemText>Apple</Select.ItemText>
  <Select.ItemIndicator>✓</Select.ItemIndicator>
</Select.Item>

Каждый Item может содержать индикаторы состояния (ItemIndicator) и текст (ItemText), что позволяет визуально обозначать выбранный элемент.

Trigger

Trigger — это элемент, который открывает или закрывает список (List) и взаимодействует с Root. Обычно это кнопка или кастомный элемент интерфейса, который инициирует показ дочерних элементов.

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

  • Может быть кастомизирован любым компонентом.
  • Автоматически связывается с Root для управления состоянием.
  • Поддерживает фокусировку и клавиатурное управление.
  • Может отображать текущее выбранное значение.
<Select.Trigger aria-label="Food">
  <Select.Value placeholder="Select a fruit" />
  <Select.Icon />
</Select.Trigger>

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

Взаимодействие компонентов

Компоненты Root, List, Item и Trigger работают как единая система:

  1. Root хранит текущее значение и контролирует состояние.
  2. Trigger открывает или закрывает List.
  3. List отображает все Item и управляет навигацией.
  4. Item позволяет выбирать отдельные значения и визуализирует их состояние.

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

Хотите, я подробно покажу пример полного селекта с кастомной разметкой и всеми состояниями?

Оглавление