Параметр placement и его значения

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

Основные значения placement

Значение placement задается строкой и может принимать несколько категорий:

  1. Основные направления:

    • top — поппер отображается над reference элементом, по вертикали.
    • bottom — поппер отображается под reference элементом.
    • left — поппер отображается слева от reference элемента.
    • right — поппер отображается справа от reference элемента.

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

  2. Варианты с выравниванием:

    Помимо базовых направлений, можно уточнить положение с помощью выравнивания: -start или -end.

    • top-start — над reference элементом, выровнено по левому краю.
    • top-end — над reference элементом, выровнено по правому краю.
    • bottom-start — под reference элементом, выровнено по левому краю.
    • bottom-end — под reference элементом, выровнено по правому краю.
    • left-start — слева, выровнено по верхнему краю.
    • left-end — слева, выровнено по нижнему краю.
    • right-start — справа, выровнено по верхнему краю.
    • right-end — справа, выровнено по нижнему краю.

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

Автоматическая корректировка позиции

Popper.js поддерживает динамическую смену позиции при нехватке места с использованием модификатора flip. Если выбранное значение placement приводит к частичному выходу поппера за границы видимой области, библиотека может автоматически изменить направление.

Пример:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'top',
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['bottom', 'right', 'left'],
      },
    },
  ],
});

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

Влияние placement на смещение (offset)

placement напрямую определяет направление, в котором применяется смещение:

  • Для top и bottom основной осью смещения будет вертикальная координата (y).
  • Для left и right основной осью будет горизонтальная координата (x).

Пример использования offset с уточнением позиции:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: [0, 10], // 0 по основной оси, 10px дополнительное смещение
    },
  },
]

Здесь второй параметр [0, 10] добавляет отступ в направлении, определяемом placement.

Динамическая генерация значений

Для сложных интерфейсов часто используют динамическое формирование значения placement в зависимости от размеров окна, позиции scroll или других условий. Popper.js позволяет задавать placement как функцию, возвращающую строку:

placement: ({ placement, reference, popper }) => {
  return window.innerWidth < 500 ? 'bottom-start' : 'top-end';
}

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

Особенности при использовании модификаторов

  • preventOverflow — контролирует, чтобы поппер не выходил за границы контейнера. При этом placement может быть изменен внутренними вычислениями.
  • flip — автоматически корректирует placement, если выбранная позиция недоступна.
  • arrow — использование стрелки требует точного учета placement, так как библиотека рассчитывает её позицию относительно стороны поппера.

Итоговые рекомендации по placement

  • Выбирать базовое направление (top, bottom, left, right) в зависимости от визуальной логики интерфейса.
  • Использовать -start и -end для точного выравнивания при необходимости.
  • Подключать flip и preventOverflow для надежного позиционирования на разных разрешениях и при скролле.
  • Использовать функцию для динамического placement в адаптивных интерфейсах.

Правильное понимание placement позволяет создавать интерфейсы, где попперы всегда видимы, удобно расположены и адаптируются к условиям отображения, не нарушая композицию страницы.

Оглавление