Назначение и применение

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

Основные задачи Floating UI

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

Ключевые возможности:
- Автоматическое смещение элемента при выходе за пределы видимой области.
- Поддержка всех направлений: top, bottom, left, right, а также комбинаций вроде top-start или bottom-end.
- Учет трансформаций и масштабирования родительских контейнеров.
Адаптивное поведение и ограничение видимости Библиотека предоставляет middleware, которые позволяют изменять положение элемента на лету. Это особенно важно для модальных окон, тултипов и выпадающих списков, чтобы они оставались видимыми на экране, независимо от скролла или размера контейнера.
Совмещение с современными фреймворками Floating UI спроектирована как фреймворк-агностичная библиотека. Она может использоваться с React, Vue, Svelte, а также в чистом Vanilla JS, что делает ее универсальным инструментом для создания интерфейсов.

Основные области применения

Тултипы и подсказки Позволяет отображать подсказки точно над элементом при наведении, учитывая положение курсора и доступное пространство вокруг элемента. Пример конфигурации:

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(), shift({ padding: 5 })],
}).then(({ x, y }) => {
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});

Выпадающие меню и селекты Floating UI позволяет динамически изменять направление меню при приближении к границам окна, предотвращая обрезку контента.
Модальные окна и контекстные панели Поддержка positioning relative to viewport обеспечивает корректное отображение всплывающих окон независимо от родительских контейнеров с overflow: hidden.
Плавающие элементы внутри scrollable контейнеров Библиотека учитывает смещение родительских блоков и корректно позиционирует элементы при прокрутке, что является проблемой для чистого CSS.

Основные концепции

Reference и Floating элементы
- Reference — элемент, относительно которого позиционируется всплывающее окно.
- Floating — сам всплывающий элемент, который “плавает” над reference.
Middleware Это функции, которые изменяют вычисленную позицию floating-элемента. Основные middleware:
- offset(distance) — задает расстояние между reference и floating.
- flip() — автоматически изменяет направление при недостатке места.
- shift({ padding }) — смещает элемент для полного отображения в viewport.
- arrow({ element }) — позиционирует стрелку, указывающую на reference.
Strategy Стратегии позиционирования:
- absolute — элемент позиционируется относительно ближайшего родителя с position: relative.
- fixed — элемент привязан к viewport и не двигается при скролле.

Примеры реального применения

Интерфейсы сложных форм: тултипы с подсказками по вводу, динамические автокомплиты.
Панели управления на дашбордах: контекстные меню и всплывающие настройки.
Редакторы контента: всплывающие тулбары для форматирования текста с учетом границ редактора.

Преимущества использования Floating UI

Точность позиционирования: корректная работа даже в сложных DOM-структурах.
Минимальная зависимость от CSS: большинство вычислений делается на уровне JS.
Гибкость: легко настраиваемое поведение с помощью middleware.
Производительность: библиотека оптимизирована для работы с множеством floating-элементов одновременно.