Root, Trigger, Value, Icon

Root является центральным компонентом в большинстве элементов интерфейса Radix UI. Он служит контейнером, который управляет состоянием дочерних компонентов и обеспечивает их взаимодействие. В контексте меню, переключателей, выпадающих списков или радиокнопок Root отвечает за хранение внутреннего состояния (открыто/закрыто, выбранное значение, активный элемент) и передачу его вниз по дереву компонентов через контекст.

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

import * as RadioGroup from '@radix-ui/react-radio-group';

<RadioGroup.Root value={selectedValue} onValueCha nge={setSelectedValue}>
  <RadioGroup.Item value="option1">Option 1</RadioGroup.Item>
  <RadioGroup.Item value="option2">Option 2</RadioGroup.Item>
</RadioGroup.Root>

Здесь Root управляет текущим значением (value) и вызывает коллбек onValueChange при выборе нового элемента. Важно помнить, что Root сам по себе не рендерит визуальные элементы, он лишь структурно объединяет дочерние компоненты.

Trigger

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

Пример использования Trigger в контексте Dropdown Menu:

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>

Ключевой момент: Trigger автоматически связывается с Root, поэтому управление открытием/закрытием контента происходит без дополнительной логики. При этом Trigger поддерживает любые стандартные свойства HTML (например, disabled, aria-label) и полностью совместим с системой доступности WAI-ARIA.

Value

Value используется для компонентов, где необходимо хранить и управлять выбором пользователя: радиокнопки, переключатели (Switch), селекты. Он определяет текущее состояние компонента и является источником правды для Root.

Особенности работы с Value:

  • Значение должно быть уникальным и соответствовать типу данных, ожидаемому компонентом.
  • onValueChange в Root обеспечивает реактивное обновление внешнего состояния при изменении Value.
  • Можно использовать как контролируемый, так и неконтролируемый компонент, передавая или не передавая value и onValueChange.

Пример с Switch:

import * as Switch from '@radix-ui/react-switch';

<Switch.Root checked={isChecked} onCheckedCha nge={setIsChecked}>
  <Switch.Thumb />
</Switch.Root>

Здесь checked выполняет функцию Value, а onCheckedChange – функцию слежения за изменением состояния.

Icon

Компонент Icon обычно используется внутри элементов интерфейса для визуального обозначения действий, состояния или направленности (например, стрелки в выпадающих списках). В Radix UI Icon не является отдельным компонентом с управлением состоянием, но часто включается в Trigger, Item или Button для улучшения UX.

Пример интеграции иконки в Dropdown Menu:

import { ChevronDownIcon } from '@radix-ui/react-icons';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

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

Особенности работы с Icon в Radix UI:

  • Иконки могут быть любыми React-компонентами или SVG-элементами.
  • Их размещение обычно внутри Trigger или Item, чтобы визуально отражать состояние (открыто/закрыто, выбран/не выбран).
  • Важно учитывать доступность: добавление aria-hidden для декоративных иконок предотвращает их озвучивание скринридерами.

Практические рекомендации

  1. Комбинирование Root и Trigger: всегда держать Trigger внутри Root, чтобы управление состоянием было согласованным и не требовало внешнего хендлинга.
  2. Состояние через Value: использовать контролируемые компоненты при необходимости синхронизации состояния с внешними данными, а неконтролируемые – для локального UI.
  3. Иконки для интуитивности: визуальные подсказки через Icon повышают доступность интерфейса и улучшают UX, особенно в сложных меню и селектах.
  4. Доступность: Radix UI автоматически добавляет многие атрибуты ARIA, но при кастомизации элементов важно проверять, чтобы Trigger и Item оставались корректно объявленными для экранных читалок.

Эти четыре компонента (Root, Trigger, Value, Icon) образуют базовый каркас большинства интерактивных элементов Radix UI и позволяют строить гибкий и доступный пользовательский интерфейс. Их правильное сочетание обеспечивает предсказуемое поведение компонентов и удобство разработки.

Оглавление