Root, Trigger, Portal, Overlay, Content

Root

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

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

  • Контекст состояния – хранит информацию о том, открыт ли компонент, активен ли триггер и др.
  • Управление событиями – обрабатывает клики, клавиатурные события и взаимодействие с фокусом.
  • Поддержка controlled/uncontrolled состояния – можно использовать open и onOpenChange для внешнего контроля состояния, либо полагаться на внутреннее управление.

Пример использования в Radix UI 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

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

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

  • События открытия/закрытия – по умолчанию управляется кликом, но можно добавлять hover или фокус через свойства onPointerDown, onKeyDown.
  • Совместимость с анимацией – при использовании анимационных компонентов Overlay и Content Trigger корректно запускает переходы.
  • Accessibility – автоматически добавляет необходимые атрибуты aria, например aria-haspopup и aria-expanded.
<DropdownMenu.Trigger className="button">
  Открыть меню
</DropdownMenu.Trigger>

Portal

Portal используется для рендеринга дочерних элементов вне DOM-иерархии родителя. Это критично для всплывающих элементов, которые должны перекрывать другие компоненты или не зависеть от overflow контейнеров.

Основные моменты:

  • Рендер вне родителя – предотвращает обрезку и конфликт z-index.
  • Поддержка анимаций и фокуса – элементы остаются интерактивными, даже если они визуально вынесены из потока документа.
  • Настройка контейнера – можно указать container для рендеринга в нестандартное место в DOM.
<DropdownMenu.Portal>
  <DropdownMenu.Content className="dropdown-content">
    <DropdownMenu.Item>Пункт 1</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Portal>

Overlay

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

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

  • Фокусировка пользователя – предотвращает случайные клики по фону.
  • Интеграция с анимацией – поддерживает плавное появление и исчезновение.
  • Поддержка закрытия кликом вне области – через свойства onPointerDownOutside.
<Dialog.Overlay className="overlay" />

Content

Content отвечает за визуальную часть всплывающего компонента. Именно здесь размещаются меню, модальные окна, тултипы и другие элементы интерфейса.

Основные возможности Content:

  • Позиционирование – можно управлять через props side, align и sideOffset.
  • Анимация – интегрируется с Radix UI motion utilities или сторонними библиотеками анимации.
  • События закрытия – поддерживает закрытие по клику вне компонента, по Escape и другим пользовательским действиям.
<DropdownMenu.Content
  className="dropdown-content"
  side="bottom"
  align="start"
  sideOffset={5}
>
  <DropdownMenu.Item>Пункт 1</DropdownMenu.Item>
  <DropdownMenu.Item>Пункт 2</DropdownMenu.Item>
</DropdownMenu.Content>

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

Компоненты Root, Trigger, Portal, Overlay и Content тесно связаны между собой:

  • Root управляет состоянием и контекстом.
  • Trigger инициирует открытие/закрытие.
  • Portal позволяет рендерить Content вне DOM-иерархии.
  • Overlay обеспечивает визуальное и функциональное отделение.
  • Content отображает основной интерфейсный блок с возможностью анимации и позиционирования.

Эта архитектура обеспечивает гибкость, модульность и простоту интеграции сложных UI-компонентов, сохраняя доступность и контроль над состоянием.

Оглавление