Отличия от flip

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

Основные принципы позиционирования

В flip позиционирование строится вокруг фиксированных алгоритмов с ограниченными возможностями настройки. Например, flip чаще всего использует готовые «флипы» (перевороты позиции) и смещения, которые заранее определяются.

В Floating UI:

  • Динамическая привязка к элементу: элемент может перемещаться относительно якоря в зависимости от видимой области viewport.
  • Модульная архитектура: Floating UI предоставляет плагины (middleware), которые можно комбинировать для достижения нужного поведения.
  • Асинхронная логика: позиция может пересчитываться в реальном времени при изменении размеров окна, скролла или содержимого.

Middleware как ключевой компонент

Middleware — это цепочка функций, которые управляют положением всплывающего элемента. Каждый middleware получает текущие координаты и возвращает модифицированные значения. Основные middleware в Floating UI:

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

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

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

flip имеет ограниченный набор конфигураций для смещения и проверки границ. Floating UI позволяет задавать:

  • Пользовательские ограничения (boundary) – элемент не выйдет за рамки указанного контейнера.
  • Предпочтительные стороны – можно указать, какие позиции должны использоваться в первую очередь.
  • Динамическое смещение – при изменении размеров окна, контента или скролла координаты пересчитываются автоматически.
import { computePosition, offset, flip, shift } from '@floating-ui/dom';

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

computePosition(button, tooltip, {
  middleware: [
    offset(10),
    flip({ fallbackPlacements: ['top', 'right'] }),
    shift({ padding: 5 })
  ]
}).then(({ x, y }) => {
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`
  });
});

Пример показывает, как комбинируются middleware для достижения гибкого поведения, чего невозможно достичь с использованием только flip.

Асинхронность и реактивность

Floating UI поддерживает асинхронное вычисление позиции, что критично для современных SPA и динамического контента. В отличие от flip:

  • Можно отслеживать изменения DOM и автоматически обновлять позицию.
  • Реактивные фреймворки (React, Vue, Solid) могут использовать Floating UI через hooks, что упрощает интеграцию.
import { autoUpdate } from '@floating-ui/dom';

autoUpdate(button, tooltip, () => {
  computePosition(button, tooltip, { middleware: [offset(5), flip()] })
    .then(({ x, y }) => {
      Object.assign(tooltip.style, { left: `${x}px`, top: `${y}px` });
    });
});

autoUpdate автоматически пересчитывает позицию при скролле, изменении размеров или контента.

Настройка fallback-позиций

В flip fallback ограничен фиксированными «запасными» позициями. Floating UI позволяет:

  • Использовать массив предпочтительных позиций с приоритетами.
  • Комбинировать с shift и offset для точного позиционирования в сложных интерфейсах.
  • Реализовать кастомные стратегии, например, смещение только по горизонтали, но с сохранением вертикального положения.

Совместимость с кастомными контейнерами

Floating UI не привязывается к body или fixed-элементам. Можно позиционировать всплывающие элементы внутри любых контейнеров с относительным позиционированием. Это делает библиотеку гибкой для сложных макетов с nested scroll или overflow-hidden контейнерами, что в flip реализуется ограниченно или требует дополнительных трюков.

Итоговые отличия

Характеристика flip Floating UI
Подход к позиционированию фиксированный, статичный динамический, асинхронный
Middleware нет есть, модульная цепочка
Комбинирование правил ограничено гибкое, любое сочетание
Реактивность минимальная встроенная, поддержка autoUpdate
Контейнерная гибкость ограничена поддержка любых контейнеров
Настройка fallback-позиций фиксированная массив с приоритетами, кастомные стратегии

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

Оглавление