Числовые значения смещения

В Floating UI смещение (offset) используется для управления положением плавающего элемента относительно его целевого элемента (reference element). Смещение определяется в пикселях и может быть положительным или отрицательным. Положительное значение смещения смещает элемент в сторону оси смещения, отрицательное — в противоположную сторону.

Смещение в Floating UI реализуется через модуль offset, который подключается как middleware к функции computePosition. Этот модуль позволяет задавать:

  • Основное смещение (mainAxis) — смещение вдоль основной оси позиции (например, вниз при placement: "bottom").
  • Перпендикулярное смещение (crossAxis) — смещение вдоль перпендикулярной оси (например, вправо при placement: "bottom").

Пример базового использования:

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

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

computePosition(reference, floating, {
  middleware: [
    offset({ mainAxis: 10, crossAxis: 5 })
  ],
}).then(({ x, y }) => {
  Object.assign(floating.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});

В этом примере плавающий элемент смещается на 10 пикселей по основной оси и на 5 пикселей по перпендикулярной оси относительно кнопки.

Использование функции для динамического смещения

Middleware offset принимает не только числовые значения, но и функцию, возвращающую объект со свойствами mainAxis и crossAxis. Это позволяет изменять смещение динамически в зависимости от состояния элемента, размера экрана или других параметров.

Пример:

offset(({ placement, reference, floating }) => {
  if (placement.startsWith('top')) {
    return { mainAxis: -10, crossAxis: 0 };
  }
  return { mainAxis: 10, crossAxis: 0 };
})

Здесь смещение автоматически меняется в зависимости от расположения плавающего элемента (top или bottom).

Комбинирование смещения с другими middleware

Смещение часто используется вместе с flip и shift:

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

Пример комплексного middleware:

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

computePosition(reference, floating, {
  middleware: [
    offset({ mainAxis: 12 }),
    flip(),
    shift({ padding: 5 })
  ],
});

В этом случае элемент сначала смещается на 12 пикселей, затем при необходимости переворачивается и сдвигается внутрь окна.

Адаптивные смещения для сложных интерфейсов

Для создания адаптивных tooltip и dropdown смещение часто зависит от размеров элементов:

offset(({ reference, floating }) => {
  const refRect = reference.getBoundingClientRect();
  const floatRect = floating.getBoundingClientRect();
  
  const dynamicOffset = Math.max(10, refRect.height / 2 - floatRect.height / 2);
  return { mainAxis: dynamicOffset, crossAxis: 0 };
})

Такое смещение гарантирует, что плавающий элемент всегда будет визуально выровнен по центру целевого элемента независимо от его высоты.

Важные нюансы и особенности

  • Положительные и отрицательные значения: положительные смещения смещают элемент по направлению оси позиции (top, bottom, left, right), отрицательные — в обратную сторону.
  • Единицы измерения: Floating UI работает с пикселями, но для динамических расчётов можно использовать любые числовые значения.
  • Порядок middleware: offset должен быть размещён до flip и shift, чтобы корректно применялось к исходной позиции элемента.
  • Функции как значения: использование функции для смещения обеспечивает максимальную гибкость при адаптивных интерфейсах и сложных позиционированиях.

Резюме по смещению

  1. Смещение контролируется через middleware offset.
  2. Основная ось (mainAxis) отвечает за движение вдоль направления позиции, второстепенная (crossAxis) — за перпендикулярное смещение.
  3. Можно использовать как числовые значения, так и функции, возвращающие объект смещения.
  4. Смещение комбинируется с flip и shift, но порядок middleware критичен.
  5. Динамическое смещение позволяет адаптировать плавающие элементы под разные размеры и положения целевых элементов.

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

Оглавление