Content и Viewport

Radix UI предоставляет низкоуровневые, полностью настраиваемые компоненты для создания сложных пользовательских интерфейсов на React. Одними из ключевых элементов для построения всплывающих элементов, таких как Dropdown, Tooltip, Popover или Dialog, являются компоненты Content и Viewport. Понимание их работы и взаимодействия критично для точного позиционирования элементов на странице.

Компонент Content

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

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

  • side — определяет сторону триггера, на которой будет отображаться содержимое. Допустимые значения: "top" | "right" | "bottom" | "left".
  • align — выравнивание относительно триггера: "start" | "center" | "end".
  • sideOffset — смещение содержимого от триггера по выбранной стороне в пикселях.
  • alignOffset — смещение по выбранной линии выравнивания.
  • collisionPadding — отступ для предотвращения выхода содержимого за пределы окна или родительского контейнера.
  • onEscapeKeyDown — обработчик нажатия клавиши Escape для закрытия содержимого.

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

import * as Popover from '@radix-ui/react-popover';

<Popover.Root>
  <Popover.Trigger>Открыть меню</Popover.Trigger>
  <Popover.Content side="bottom" align="center" sideOffset={8}>
    <div>Основное содержимое поповера</div>
  </Popover.Content>
</Popover.Root>

В данном примере Content автоматически позиционируется под триггером с небольшим отступом в 8 пикселей. Важно понимать, что без Viewport позиционирование ограничено лишь размерами окна браузера.

Компонент Viewport

Viewport отвечает за область, в пределах которой Radix UI рассчитывает позицию Content. Он особенно полезен при использовании ScrollContainer или сложных layout-структур, где элемент может выходить за пределы видимой области. Viewport предотвращает обрезку или неправильное отображение всплывающего содержимого.

Ключевые особенности:

  • Автоматическое ограничение содержимого внутри видимой области.
  • Обеспечение корректного поведения при скролле родителя.
  • Поддержка динамических размеров и адаптивного позиционирования.

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

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

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Меню</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Viewport>
      <DropdownMenu.Item>Элемент 1</DropdownMenu.Item>
      <DropdownMenu.Item>Элемент 2</DropdownMenu.Item>
      <DropdownMenu.Item>Элемент 3</DropdownMenu.Item>
    </DropdownMenu.Viewport>
  </DropdownMenu.Content>
</DropdownMenu.Root>

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

Связь между Content и Viewport

  • Content задаёт фактическое содержимое и его позиционирование.
  • Viewport ограничивает область видимости и корректирует позиционирование, учитывая переполнение.
  • Без Viewport всплывающие элементы могут некорректно отображаться при сложных layout или при скролле контейнеров.
  • Viewport может использоваться совместно с collisionPadding для точной настройки отступов от краев видимой области.

Настройка анимаций и стилей

Content поддерживает кастомные анимации через стили CSS или библиотеку @radix-ui/react-animations. Обычно используют свойства data-state для управления состояниями открытости:

[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
}

[data-state="closed"] {
  opacity: 0;
  transform: translateY(-10px);
}

Анимации в сочетании с Viewport позволяют создать плавное появление и исчезновение всплывающих элементов, не нарушая позиционирования и ограничений видимой области.

Советы по производительности и стабильности

  • Использовать Viewport при любом динамическом контенте, особенно в мобильных и responsive интерфейсах.
  • Комбинировать sideOffset и alignOffset для точного позиционирования без жесткого задания стилей.
  • При сложной иерархии контейнеров с overflow: hidden или scroll всегда оборачивать Content в Viewport, чтобы предотвратить обрезку содержимого.
  • Контролировать размеры Viewport с помощью CSS: max-width, max-height и overflow для адаптивного поведения.

Content и Viewport — фундаментальные элементы Radix UI для построения гибких, точных и отзывчивых всплывающих интерфейсов. Грамотное сочетание этих компонентов обеспечивает корректное отображение и максимальную стабильность UI независимо от структуры страницы.

Оглавление