Автоматический выбор оптимальной позиции

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

Для этого Floating UI использует концепцию позиционных стратегий и middleware. Основная стратегия — absolute или fixed, а middleware позволяет динамически изменять расположение и учитывать ограничители пространства.

Middleware для выбора оптимальной позиции

  1. flip Middleware flip проверяет доступное пространство вокруг якоря и автоматически выбирает альтернативное направление, если стандартное приводит к обрезанию элемента. Пример использования:
import { computePosition, flip, offset } from '@floating-ui/dom';

computePosition(referenceElement, floatingElement, {
  placement: 'bottom',
  middleware: [
    offset(8),
    flip()
  ],
}).then(({ x, y, placement }) => {
  Object.assign(floatingElement.style, {
    left: `${x}px`,
    top: `${y}px`
  });
});

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

  • placement задаёт первоначальное направление (top, bottom, left, right).
  • flip проверяет альтернативные направления в порядке приоритета, чтобы элемент не выходил за границы.
  • Можно комбинировать с offset для отступа от якоря.
  1. shift Middleware shift корректирует позицию, если элемент частично выходит за границы viewport. Отличается от flip тем, что не меняет направление, а смещает элемент внутри выбранного placement.
import { shift } from '@floating-ui/dom';

computePosition(referenceElement, floatingElement, {
  placement: 'top',
  middleware: [
    shift({ padding: 5 })
  ],
});

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

  • padding задаёт минимальное расстояние от границ viewport.
  • Полезен для мелких коррекций, когда flip не нужен.
  1. autoPlacement Middleware autoPlacement объединяет логику flip и shift, анализируя все доступные направления и автоматически выбирая лучшее с учётом размеров элемента и ограничений.
  • Позволяет задать предпочтительные направления (preferredPlacements).
  • Работает вместе с boundary для ограничения области видимости.

Настройка приоритетов и ограничений

Floating UI позволяет детально управлять поведением позиционирования через параметры middleware:

  • padding – минимальное расстояние от границ контейнера или viewport.
  • boundary – элемент-контейнер, внутри которого элемент не должен выходить. По умолчанию это viewport.
  • crossAxis – разрешает или запрещает смещение по перпендикулярной оси (важно для меню и тултипов).
  • fallbackPlacements – список альтернативных направлений, которые будут проверяться при flip или autoPlacement.

Пример:

computePosition(referenceElement, floatingElement, {
  placement: 'right',
  middleware: [
    offset(10),
    flip({ fallbackPlacements: ['bottom', 'top'] }),
    shift({ padding: 5 })
  ],
});

Здесь элемент сначала пытается расположиться справа, если не хватает места — пробует снизу или сверху, при этом сдвигается внутрь viewport на 5px при необходимости.

Управление размерами и ограничениями

Floating UI поддерживает middleware для изменения размеров элементов, чтобы они помещались в доступное пространство:

  • size – изменяет ширину или высоту floating элемента под доступное место.
  • inline – используется для inline-элементов с динамическим размером.

Пример динамического подбора ширины:

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

computePosition(referenceElement, floatingElement, {
  placement: 'bottom',
  middleware: [
    flip(),
    shift(),
    size({
      apply({ availableWidth }) {
        floatingElement.style.width = `${availableWidth}px`;
      }
    })
  ],
});

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

  • Комбинировать flip и shift — это обеспечивает корректное расположение даже на маленьких экранах.
  • Использовать autoPlacement для сложных интерфейсов с множеством вариантов отображения.
  • Всегда учитывать offset и padding, чтобы элементы не слипались с якорем или границами.
  • Тестировать с различными размерами viewport, особенно для мобильных и планшетных интерфейсов.

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

Оглавление