Константы и enum

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

Основные константы

1. autoUpdate Функция autoUpdate используется для автоматического пересчёта позиции floating-элемента при изменениях DOM, скролле или ресайзе окна. Она возвращает функцию отмены наблюдения.

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

const cleanup = autoUpdate(reference, floating, updatePosition);

  • Параметры:

    • reference – элемент, к которому привязывается floating-элемент.
    • floating – сам floating-элемент.
    • updatePosition – функция, выполняющая пересчёт позиции.

  • Возвращаемое значение: функция для остановки наблюдения.

2. Placement Placement — ключевая константа для задания позиции относительно reference-элемента. Она определяет, где будет отображаться floating-элемент: сверху, снизу, слева, справа, а также с возможностью уточнения вариации (start, end).

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

computePosition(reference, floating, {
  placement: 'bottom-start',
  middleware: [flip(), shift()]
});

Доступные значения Placement:

  • 'top', 'top-start', 'top-end'
  • 'bottom', 'bottom-start', 'bottom-end'
  • 'left', 'left-start', 'left-end'
  • 'right', 'right-start', 'right-end'

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

  • start и end ориентированы на направление текста (LTR или RTL).
  • Константа используется не только в computePosition, но и при настройке middleware, таких как flip и shift.

Enum для middleware

Floating UI предоставляет ряд enum-подобных значений для настройки middleware.

1. Shift Используется для смещения floating-элемента так, чтобы он не выходил за границы видимой области.

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

computePosition(reference, floating, {
  placement: 'top',
  middleware: [shift({ padding: 8 })]
});

  • Параметры ShiftOptions:

    • padding – отступ от края видимой области.
    • boundary – элемент или область, ограничивающая движение floating-элемента.

2. Flip Middleware flip позволяет автоматически менять сторону, если исходная позиция не помещается на экране.

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

computePosition(reference, floating, {
  placement: 'top',
  middleware: [flip({ fallbackPlacements: ['bottom', 'right'] })]
});

  • Опции FlipOptions:

    • fallbackPlacements – массив альтернативных позиций.
    • boundary – элемент, определяющий ограничения.

3. Arrow Middleware arrow используется для позиционирования стрелки, указывающей на reference-элемент.

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

const arrowElement = document.querySelector('.arrow');

computePosition(reference, floating, {
  middleware: [arrow({ element: arrowElement })]
});

  • Опции:

    • element – DOM-элемент стрелки.
    • padding – отступ стрелки от края floating-элемента.

Прочие важные константы

1. strategy Определяет, как будет позиционироваться floating-элемент:

  • 'absolute' — позиционирование относительно ближайшего позиционированного предка.
  • 'fixed' — позиционирование относительно окна браузера.
computePosition(reference, floating, {
  strategy: 'fixed',
});

2. middlewareData Содержит результаты вычислений middleware, которые могут быть использованы для дополнительных манипуляций с DOM.

const { x, y, middlewareData } = await computePosition(reference, floating, {
  middleware: [shift(), arrow({ element: arrowElement })]
});
console.log(middlewareData.arrow); // { x: 10, y: 5 }

  • Применение:

    • Корректировка положения стрелок.
    • Анимации при смещении.

Сводка enum и констант

Константа / Enum Назначение Примеры использования
Placement Выбор позиции floating-элемента 'top-start', 'bottom-end'
strategy Способ позиционирования 'absolute', 'fixed'
Shift Сдвиг floating-элемента shift({ padding: 8 })
Flip Автоматическая смена стороны flip({ fallbackPlacements: ['bottom'] })
Arrow Позиционирование стрелки arrow({ element: arrowEl, padding: 5 })
middlewareData Данные middleware после вычисления middlewareData.arrow
autoUpdate Автообновление позиции при изменениях DOM autoUpdate(ref, float, updateFn)

Использование этих констант и enum позволяет строить сложные, динамичные интерфейсы с точным управлением поведением floating-элементов, минимизируя ручные вычисления и повышая надежность работы компонентов.

Оглавление