Вариации выравнивания

Popper.js предоставляет гибкую систему позиционирования элементов относительно другого элемента (reference element) с учетом границ окна браузера, скролла и других ограничений. Центральным понятием является popper, который отображается в позиции относительно reference. Контроль над выравниванием осуществляется через свойства placement и modifiers.

Свойство placement

Свойство placement задает базовое направление появления popper относительно reference. Доступны следующие значения:

  • top – popper располагается над reference.
  • bottom – popper располагается под reference.
  • left – popper располагается слева от reference.
  • right – popper располагается справа от reference.

Каждое направление может быть уточнено через суффиксы:

  • -start – выравнивание по началу оси, например, top-start выравнивает popper к левому краю reference.
  • -end – выравнивание по концу оси, например, bottom-end выравнивает popper к правому краю reference.

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

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'top-start',
});

Управление смещением: модификатор offset

Даже при точном указании placement может потребоваться сместить popper относительно reference. Для этого применяется модификатор offset.

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'bottom',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10], // [смещение по основной оси, смещение по перекрестной оси]
      },
    },
  ],
});
  • Первое значение – смещение вдоль основной оси (top/bottom → вертикаль, left/right → горизонталь).
  • Второе значение – смещение вдоль перекрестной оси (лево/право или верх/низ в зависимости от основной оси).

Автоматическое позиционирование: модификатор flip

Когда popper не помещается в указанном направлении из-за границ окна или родительских элементов, модификатор flip автоматически изменяет направление:

modifiers: [
  {
    name: 'flip',
    options: {
      fallbackPlacements: ['top', 'right', 'left'], // варианты, если основной placement не помещается
    },
  },
]

Особенности работы flip:

  • Срабатывает только при обнаружении ограничений по пространству.
  • Можно задать порядок fallback-позиций для тонкой настройки поведения.
  • Работает совместно с preventOverflow для предотвращения выхода popper за границы.

Выравнивание по оси и перекрестной оси: mainAxis и crossAxis

Popper.js делит позицию на две оси:

  • Main Axis (основная ось) – направление, соответствующее placement (top → вертикальная ось).
  • Cross Axis (перекрестная ось) – перпендикулярная основная ось.

Модификатор offset и встроенные механизмы позиционирования позволяют управлять смещением по обеим осям. Пример тонкой настройки:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: ({ placement }) => {
        if (placement.startsWith('top')) {
          return [0, 20]; // смещение вниз при top
        }
        return [0, 10]; // стандартное смещение
      },
    },
  },
]

Ограничение выхода за границы: preventOverflow

Чтобы popper не выходил за пределы viewport или родительского контейнера, используется модификатор preventOverflow:

modifiers: [
  {
    name: 'preventOverflow',
    options: {
      boundary: 'viewport', // ограничения: viewport, window, элемент
      padding: 8, // минимальное расстояние до границ
    },
  },
]

Ключевые моменты:

  • Работает совместно с flip для корректного изменения placement.
  • Можно задавать кастомные границы через DOM-элемент.
  • Позволяет сохранить визуальную целостность интерфейса при адаптивном дизайне.

Комбинирование выравнивания

Поппер позволяет комбинировать все инструменты: placement, offset, flip, preventOverflow. Пример:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'right-start',
  modifiers: [
    { name: 'offset', options: { offset: [0, 12] } },
    { name: 'flip', options: { fallbackPlacements: ['left-start', 'bottom-start'] } },
    { name: 'preventOverflow', options: { boundary: 'viewport', padding: 5 } },
  ],
});

В этом примере popper:

  • Начально выравнивается справа и по верхнему краю reference.
  • Смещается на 12px вдоль перекрестной оси.
  • Переключается на fallback-позиции при нехватке места.
  • Не выходит за границы viewport, оставляя 5px отступа.

Важные нюансы

  • Попапы с динамическим контентом – изменение размеров popper требует вызова update() для пересчета позиции.
  • Scroll и resize – Popper автоматически отслеживает изменения, если включены event listeners.
  • Адаптивное выравнивание – комбинация flip + preventOverflow позволяет создавать интерфейсы, где popper всегда видим и корректно позиционируется.

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

Оглавление