Стратегии позиционирования

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

Reference и Floating элементы

Reference элемент — это элемент, относительно которого будет позиционироваться floating элемент. Floating элемент — это сам плавающий блок, который может отображать дополнительный контент, например, подсказку или меню.

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

Стратегии позиционирования

Fixed и Absolute

  • Absolute — плавающий элемент позиционируется относительно ближайшего родителя с position: relative, absolute или fixed. Используется для классического позиционирования внутри DOM.
  • Fixed — элемент фиксируется относительно окна просмотра (viewport) и не смещается при прокрутке. Используется для sticky тултипов, уведомлений и модальных окон.

Выбор стратегии зависит от контекста:

  • Если нужно, чтобы элемент всегда следовал за reference элементом при прокрутке — предпочтительнее absolute.
  • Если элемент должен оставаться на одном месте при скролле — fixed.

Floating UI автоматически адаптирует координаты в зависимости от выбранной стратегии.

Алгоритмы расчёта позиции

Floating UI предлагает несколько алгоритмов для определения оптимальной позиции:

  1. Placement — направление расположения относительно reference элемента. Возможные значения:

    • top, bottom, left, right
    • Комбинации с -start и -end (top-start, bottom-end), которые задают выравнивание по горизонтали или вертикали.

  2. Middleware — цепочка функций для дополнительной настройки позиции:

    • offset — задаёт смещение от reference элемента.
    • flip — автоматически меняет позицию, если выбранная сторона выходит за пределы видимой области.
    • shift — корректирует положение floating элемента, чтобы избежать выхода за границы контейнера.
    • size — динамически изменяет размеры floating элемента в зависимости от доступного пространства.

Пример конфигурации:

import { computePosition, offset, flip, shift } from '@floating-ui/dom';

computePosition(referenceEl, floatingEl, {
  placement: 'bottom-start',
  middleware: [offset(8), flip(), shift({ padding: 5 })]
}).then(({ x, y }) => {
  Object.assign(floatingEl.style, {
    left: `${x}px`,
    top: `${y}px`
  });
});

Принципы адаптивного позиционирования

  • Адаптация к размеру окна: floating элемент всегда остаётся в пределах viewport, используя middleware shift и flip.
  • Учёт прокрутки: библиотека корректирует координаты с учётом текущего scroll контейнера.
  • Динамическая подгонка: через middleware size можно автоматически менять ширину или высоту floating элемента для предотвращения обрезки контента.

Стратегии выбора placement

  • Primary → Secondary: сначала выбирается предпочтительное расположение (bottom), при невозможности отображения применяется запасной вариант (top).
  • Edge-aware: элементы смещаются с учётом краёв окна, чтобы избежать выхода за границы.
  • Auto placement: библиотека анализирует доступное пространство и выбирает наилучшее расположение автоматически.

Управление перекрытиями

Floating UI позволяет контролировать взаимодействие с другими элементами интерфейса:

  • flip предотвращает перекрытие границ viewport.
  • preventOverflow защищает от выхода за контейнеры с ограниченной шириной/высотой.
  • arrow middleware вычисляет точное положение стрелки для визуального соединения с reference элементом.

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

import { arrow } from '@floating-ui/dom';

computePosition(referenceEl, floatingEl, {
  placement: 'top',
  middleware: [offset(10), flip(), arrow({ element: arrowEl })]
});

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

  1. Выбор основной оси: для тултипов лучше использовать вертикальное позиционирование (top или bottom), для меню — горизонтальное (left или right).
  2. Минимизация смещений: стараться избегать избыточных offset, чтобы элемент оставался естественно связанным с reference элементом.
  3. Динамическая корректировка размеров: особенно важно для мобильных экранов, чтобы контент полностью помещался.
  4. Обработка edge cases: всегда использовать flip и shift для предотвращения выпадения элементов за границы viewport.

Floating UI предоставляет полный контроль над позиционированием, позволяя реализовывать сложные интерфейсные решения с минимальным количеством кода и высокой надёжностью. Оптимальная стратегия позиционирования достигается сочетанием placement, middleware и выбранной стратегии fixed/absolute, что позволяет адаптировать floating элементы под любые сценарии использования.

Оглавление