Параметр alignment

Параметр alignment отвечает за точное позиционирование плавающего элемента относительно его опорного элемента. Он является частью конфигурации функции computePosition и определяет, как именно будет выравнено всплывающее окно, тултип или меню по оси, перпендикулярной основной. В Floating UI основная ось определяется параметром placement, а alignment управляет смещением вдоль второстепенной оси.

Возможные значения alignment

Floating UI поддерживает несколько предопределённых значений alignment:

  • start — выравнивание по началу второстепенной оси.
  • center — выравнивание по центру второстепенной оси.
  • end — выравнивание по концу второстепенной оси.
  • auto — автоматически выбирается оптимальное выравнивание с учётом доступного пространства.

Например, если placement равен "top", то второстепенная ось — горизонтальная. В этом случае:

  • alignment: "start" → левый край плавающего элемента совпадает с левым краем опорного элемента.
  • alignment: "center" → плавающий элемент центрируется относительно опорного.
  • alignment: "end" → правый край плавающего элемента совпадает с правым краем опорного.

Если placement равен "right", второстепенная ось вертикальная, и аналогично:

  • alignment: "start" → верхний край плавающего элемента совпадает с верхним краем опорного.
  • alignment: "center" → вертикальное центрирование.
  • alignment: "end" → нижний край плавающего элемента совпадает с нижним краем опорного.

Пример использования alignment

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

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

computePosition(reference, floating, {
  placement: 'top',
  middleware: [
    offset(10),
    flip(),
    shift({ padding: 5 })
  ],
  strategy: 'absolute',
  alignment: 'start'
}).then(({ x, y }) => {
  Object.assign(floating.style, {
    left: `${x}px`,
    top: `${y}px`
  });
});

В этом примере тултип располагается над кнопкой с смещением к левому краю (alignment: 'start'). Параметры flip и shift обеспечивают корректное отображение при недостатке места на экране.

Динамическое выравнивание через auto

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

computePosition(reference, floating, {
  placement: 'bottom',
  alignment: 'auto',
  middleware: [shift({ padding: 10 })]
});

Влияние alignment на поведение middleware

Middleware в Floating UI, такие как shift и flip, учитывают alignment при расчёте корректного положения. Например:

  • flip() меняет сторону основного выравнивания при недостатке места.
  • shift() смещает элемент вдоль второстепенной оси, но сохранение alignment (start, center, end) гарантирует, что смещение не нарушает желаемого визуального эффекта.

Особенности при кастомной стратегии позиционирования

Если используется strategy: 'fixed' или strategy: 'absolute', параметр alignment всё равно влияет на начальную точку отсчёта для координат x и y. Это особенно важно при разработке собственных компонентов, где требуется точное соответствие краёв плавающего элемента краям опоры.

Советы по использованию

  • При фиксированных размерах плавающего элемента лучше выбирать start или end, чтобы визуально привязать элемент к краю опоры.
  • При динамических размерах или длинном контенте оптимально использовать center или auto, чтобы элемент выглядел симметрично.
  • Совмещать alignment с offset() для создания дополнительного отступа от края опорного элемента.
  • Проверять взаимодействие с flip и shift, особенно при использовании auto, чтобы избежать неожиданных перекосов.

Заключение по применению alignment

Параметр alignment обеспечивает детальный контроль над второстепенной осью позиционирования и позволяет создавать гибкие интерфейсы. Понимание его взаимодействия с placement и middleware критично для точного и адаптивного размещения плавающих элементов на странице.

Оглавление