Apply функция

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

Функция вызывается автоматически после того, как Floating UI рассчитала координаты для целевого элемента. Основная задача apply — корректно наложить полученные значения на элемент с учётом всех дополнительных настроек и модификаторов.

Сигнатура и основные параметры

apply({
  element,
  x,
  y,
  strategy
});
  • element – HTML-элемент, к которому необходимо применить позиционирование.
  • x – горизонтальная координата относительно родителя или окна.
  • y – вертикальная координата.
  • strategy – стратегия позиционирования, может быть "absolute" или "fixed".

strategy определяет, будет ли элемент позиционироваться относительно ближайшего позиционированного предка или относительно окна. "absolute" учитывает смещение родителя, "fixed" — фиксирует элемент относительно viewport.

Применение стандартного apply

В стандартной конфигурации Floating UI apply выполняет простое присвоение координат через стиль CSS:

import {computePosition, autoUpdate} from '@floating-ui/dom';

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

computePosition(reference, floating).then(({x, y}) => {
  Object.assign(floating.style, {
    left: `${x}px`,
    top: `${y}px`,
    position: 'absolute'
  });
});

Здесь computePosition возвращает объект с координатами x и y, которые затем напрямую применяются к стилю floating через стандартный apply.

Кастомизация функции apply

Для сложных интерфейсов стандартного применения координат часто недостаточно. Floating UI позволяет переопределить apply через middleware:

function customApply({element, x, y, strategy}) {
  element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
  element.style.position = strategy;
}

computePosition(reference, floating, {
  middleware: [],
  strategy: 'absolute',
  platform: {
    applyStyles: customApply
  }
});

Преимущества кастомного применения:

  • Использование transform вместо top/left позволяет избежать перерисовки макета (reflow) и повышает производительность.
  • Возможность применять анимации или смещения.
  • Гибкость при работе с элементами в сложных слоях (z-index, overflow).

Особенности работы с middleware

Middleware Floating UI часто генерируют смещения и корректировки, которые необходимо применить к элементу. Функция apply должна учитывать их:

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

computePosition(reference, floating, {
  middleware: [offset(10), shift({padding: 5})]
}).then(({x, y}) => {
  Object.assign(floating.style, {
    left: `${x}px`,
    top: `${y}px`,
    position: 'absolute'
  });
});
  • offset – добавляет смещение от базовой позиции.
  • shift – корректирует положение, чтобы элемент не выходил за границы viewport.

apply всегда получает финальные координаты после применения всех middleware, гарантируя, что элемент будет отображаться корректно.

Поддержка анимаций через apply

Для плавных переходов можно интегрировать apply с CSS-анимациями:

function animatedApply({element, x, y, strategy}) {
  element.style.transition = 'transform 0.2s ease';
  element.style.transform = `translate(${x}px, ${y}px)`;
  element.style.position = strategy;
}

Это позволяет поддерживать динамическое позиционирование элементов при изменении размера окна или при прокрутке страницы без резких перескоков.

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

  • Всегда проверять strategy, особенно если элемент должен быть закреплён на экране при скролле.
  • Для сложных интерфейсов стоит использовать transform вместо top/left для повышения производительности.
  • При работе с анимациями и middleware необходимо применять финальные координаты после всех вычислений.
  • Кастомная функция apply может быть использована для интеграции с фреймворками типа React или Vue, где управление DOM напрямую может быть нежелательным.

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

Оглавление