Ориентация панели

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

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

Свойство side

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

  • top — панель появляется над триггером
  • right — панель появляется справа
  • bottom — панель появляется под триггером
  • left — панель появляется слева

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

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

<Popover.Root>
  <Popover.Trigger>Открыть панель</Popover.Trigger>
  <Popover.Content side="right">
    Контент панели справа
  </Popover.Content>
</Popover.Root>

При указании side="right" панель будет открываться справа от кнопки-триггера.

Свойство align

Свойство align позволяет управлять выравниванием панели относительно выбранной стороны триггера:

  • start — выравнивание по началу (левый край для горизонтали, верхний край для вертикали)
  • center — выравнивание по центру
  • end — выравнивание по концу (правый край для горизонтали, нижний край для вертикали)

Пример:

<Popover.Content side="bottom" align="start">
  Панель снизу с выравниванием по началу
</Popover.Content>

В комбинации side и align можно точно позиционировать панель в сложных интерфейсах.

Свойство sideOffset и alignOffset

Для более тонкой настройки положения панели используются sideOffset и alignOffset:

  • sideOffset — смещение панели от триггера по оси выбранной стороны
  • alignOffset — смещение по оси выравнивания

Пример:

<Popover.Content side="bottom" align="center" sideOffset={10} alignOffset={-20}>
  Смещенная панель
</Popover.Content>

Здесь панель будет смещена на 10 пикселей вниз от триггера и на 20 пикселей влево относительно центра.

Автоматическая адаптация позиции

Radix UI автоматически учитывает размеры окна и переставляет панель, если она выходит за границы видимой области. Для этого используется свойство collisionBoundary и метод avoidCollisions:

<Popover.Content side="right" align="center" collisionBoundary="viewport">
  Панель с учетом границ окна
</Popover.Content>

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

Применение в DropdownMenu и Tooltip

Принципы ориентации аналогичны и для других компонентов:

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

<DropdownMenu.Root>
  <DropdownMenu.Trigger>Меню</DropdownMenu.Trigger>
  <DropdownMenu.Content side="bottom" align="end">
    <DropdownMenu.Item>Пункт 1</DropdownMenu.Item>
    <DropdownMenu.Item>Пункт 2</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

В Tooltip тоже используется side и align:

import * as Tooltip from '@radix-ui/react-tooltip';

<Tooltip.Root>
  <Tooltip.Trigger>Наведи курсор</Tooltip.Trigger>
  <Tooltip.Content side="top" align="center">
    Подсказка сверху
  </Tooltip.Content>
</Tooltip.Root>

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

  • Для вертикальных панелей чаще используют side="right" или side="left".
  • Для всплывающих меню обычно side="bottom".
  • Выравнивание align="center" обеспечивает симметрию и аккуратный интерфейс.
  • Смещения через sideOffset и alignOffset помогают избежать наложений на триггер или соседние элементы.
  • Всегда учитывать адаптивность: панели должны корректно позиционироваться на мобильных устройствах и при изменении размеров окна.

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

Оглавление