Root, Item, Header, Trigger, Content

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

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

  • defaultValue – начальное значение компонента, например, выбранный элемент.
  • value – управляемое значение для контролируемых компонентов.
  • onValueChange – callback-функция, вызываемая при изменении состояния.
  • modal – булевое значение, определяющее, является ли компонент модальным (важно для управления фокусом и блокировки скролла).

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

import * as Accordion from '@radix-ui/react-accordion';

<Accordion.Root type="single" defaultValue="item-1">
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>Раздел 1</Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      Контент раздела 1
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

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

Item: Элемент внутри Root

Компонент Item представляет отдельную единицу внутри контейнера Root. Он всегда располагается внутри Root и является непосредственным контейнером для Header, Trigger и Content. Item отвечает за отслеживание своего состояния: открыт или закрыт, выбран или нет.

Ключевые свойства Item:

  • value – уникальный идентификатор элемента, используемый Root для управления состоянием.
  • disabled – блокирует элемент от взаимодействия с пользователем.

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

<Accordion.Item value="item-2" disabled>
  <Accordion.Header>
    <Accordion.Trigger>Раздел 2</Accordion.Trigger>
  </Accordion.Header>
  <Accordion.Content>
    Контент раздела 2 (недоступен)
  </Accordion.Content>
</Accordion.Item>

Использование свойства disabled позволяет управлять доступностью отдельных элементов, при этом Root продолжает корректно управлять состоянием остальных элементов.

Header: Заголовок элемента

Header в Radix UI не отображает контент сам по себе, а служит оберткой для Trigger. Он обеспечивает правильную семантику и управление фокусом. Главная задача – объединить элементы управления, такие как кнопки или интерактивные триггеры, внутри элемента Item.

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

  • Является обязательной оберткой для Trigger в большинстве компонентов Radix UI.
  • Поддерживает доступность, автоматически связывая Trigger с Content через атрибуты ARIA.

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

<Accordion.Item value="item-3">
  <Accordion.Header>
    <Accordion.Trigger>Раздел 3</Accordion.Trigger>
  </Accordion.Header>
  <Accordion.Content>
    Контент раздела 3
  </Accordion.Content>
</Accordion.Item>

Без Header корректное управление фокусом и aria-связями будет нарушено.

Trigger: Элемент управления

Trigger – это интерактивный компонент, который инициирует открытие или закрытие содержимого. В большинстве случаев это кнопка, но можно использовать любой элемент с обработкой событий onClick и поддержкой keyboard navigation.

Ключевые свойства Trigger:

  • asChild – позволяет рендерить кастомный компонент вместо стандартного, сохраняя поведение Radix UI.
  • disabled – отключает взаимодействие, аналогично Item.

Пример использования с кастомным элементом:

<Accordion.Trigger asChild>
  <button className="custom-trigger">Раздел 4</button>
</Accordion.Trigger>

Использование asChild делает компонент максимально гибким для интеграции с существующим UI.

Content: Содержимое элемента

Content отвечает за отображение информации, связанной с конкретным Item. Radix UI предоставляет управление анимациями, фокусом и доступностью по умолчанию, включая ARIA-атрибуты aria-hidden и id.

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

  • Автоматически скрывается при закрытии Item.
  • Поддерживает анимацию открытия и закрытия с использованием CSS или библиотек анимации.
  • Можно использовать asChild для кастомного рендеринга содержимого.

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

<Accordion.Content>
  <p>Подробная информация по разделу 4.</p>
</Accordion.Content>

Рекомендации по анимации:

  • Использовать motion из Framer Motion или CSS-переходы.
  • Обеспечить плавное изменение высоты и opacity для лучшего UX.
  • Следить за доступностью: скрытый контент должен оставаться недоступным для клавиатурного навигации.

Эта структура компонентов — Root → Item → Header → Trigger → Content — является основной для большинства интерактивных элементов в Radix UI. Она обеспечивает модульность, управление состоянием и доступность без дополнительного кода.

Оглавление