Позиционирование карточки

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

Компонент Popover и его структура

Компонент Popover состоит из нескольких основных элементов:

  • Popover.Root — контейнер, управляющий состоянием видимости.
  • Popover.Trigger — элемент, который активирует отображение карточки.
  • Popover.Content — сам контент карточки, который необходимо позиционировать.
  • Popover.Arrow — стрелка, указывающая на триггер.

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

<Popover.Root>
  <Popover.Trigger>Открыть карточку</Popover.Trigger>
  <Popover.Content side="top" align="center">
    Содержимое карточки
    <Popover.Arrow />
  </Popover.Content>
</Popover.Root>

Позиционирование с помощью пропсов side и align

side определяет, с какой стороны относительно триггера будет появляться карточка:

  • top — сверху
  • bottom — снизу
  • left — слева
  • right — справа

align управляет выравниванием карточки относительно триггера:

  • start — по левому/верхнему краю
  • center — по центру
  • end — по правому/нижнему краю

Комбинации этих пропсов позволяют точно настроить положение карточки. Например, side="right" и align="start" отобразят карточку справа от триггера и выровняют по верхнему краю.

Динамическое позиционирование

Radix UI поддерживает автоматическое смещение карточки при нехватке пространства с помощью пропса sideOffset:

<Popover.Content side="bottom" align="center" sideOffset={8}>
  Содержимое карточки
</Popover.Content>

Значение sideOffset задаёт отступ от триггера в пикселях, обеспечивая визуальное разделение между элементами.

Ограничение позиции и скроллинг

Для предотвращения выхода карточки за границы окна используется проп collisionBoundary и библиотека @radix-ui/react-primitive:

<Popover.Content collisionBoundary={document.body} sideOffset={10}>
  Контент
</Popover.Content>

Это гарантирует, что при появлении карточка останется в видимой области экрана.

Анимации и переходы

Radix UI позволяет применять анимации при появлении карточки через CSS-переходы. Например:

[data-state="open"] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms ease, transform 200ms ease;
}

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

Поддержка состояний open и closed позволяет плавно интегрировать анимации в интерфейс.

Стрелка (Popover.Arrow) и её позиционирование

Popover.Arrow позиционируется автоматически, но её смещение можно корректировать с помощью пропса offset:

<Popover.Arrow offset={5} />

Значение offset задаёт расстояние стрелки от края карточки, позволяя точнее выровнять указатель на триггер.

Управление видимостью и события

Radix UI использует управляемое и неуправляемое состояние:

  • defaultOpen — начальное состояние видимости.
  • open + onOpenChange — управляемое состояние.
<Popover.Root open={isOpen} onOpenCha nge={setIsOpen}>
  <Popover.Trigger>Кнопка</Popover.Trigger>
  <Popover.Content>Контент карточки</Popover.Content>
</Popover.Root>

Это особенно полезно при необходимости синхронизации видимости с внешними событиями или состояниями приложения.

Практические советы по позиционированию

  1. Использовать sideOffset и align для точного размещения — часто стандартного выравнивания недостаточно для адаптивных интерфейсов.
  2. Ограничивать границы с помощью collisionBoundary — предотвращает обрезку карточки на маленьких экранах.
  3. Проверять анимации на разных сторонах — плавные переходы делают интерфейс более естественным.
  4. Комбинировать с CSS-свойствами max-width и min-width — карточки остаются читаемыми независимо от размера окна.

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

Оглавление