Параметры функции

Popper.js — это мощная библиотека для позиционирования всплывающих элементов относительно целевых элементов на странице. Все управление поведением поппера осуществляется через создание экземпляра Popper с набором конфигурационных параметров. Основная функция инициализации выглядит так:

const popperInstance = Popper.createPopper(reference, popper, options);

Здесь reference — элемент, относительно которого будет позиционироваться поппер, popper — сам всплывающий элемент, options — объект с настройками, который определяет все тонкости поведения.

placement

Описание: Определяет начальное положение поппера относительно reference. Возможные значения:

  • 'top' — сверху
  • 'bottom' — снизу
  • 'left' — слева
  • 'right' — справа
  • 'top-start', 'top-end' — верх с выравниванием по левому или правому краю
  • 'bottom-start', 'bottom-end' — низ с выравниванием
  • 'left-start', 'left-end' — слева
  • 'right-start', 'right-end' — справа

Пример:

const popperInstance = Popper.createPopper(reference, popper, {
  placement: 'bottom-start'
});

modifiers

Описание: Массив объектов, которые расширяют стандартное поведение Popper.js. Каждый модификатор имеет ключ name и набор опций options.

Основные модификаторы:

  • offset — задает смещение поппера относительно reference

    {
  name: 'offset',
  options: {
    offset: [0, 8] // [skew по оси X, смещение по оси Y]
  }
}

  • flip — разрешает автоматическую смену позиции, если выбранная сторона не помещается на экране

    {
  name: 'flip',
  options: {
    fallbackPlacements: ['top', 'right', 'left'] // альтернативные позиции
  }
}

  • preventOverflow — предотвращает выход поппера за границы видимой области

    {
  name: 'preventOverflow',
  options: {
    boundary: document.body, // граница ограничения
    padding: 8
  }
}

  • arrow — управляет положением стрелки поппера

    {
  name: 'arrow',
  options: {
    element: arrowElement,
    padding: 5
  }
}

Модификаторы выполняются в порядке, определенном в массиве, что позволяет точно контролировать поведение поппера.

strategy

Описание: Определяет стратегию позиционирования элемента. Доступны два значения:

  • 'absolute' — поппер позиционируется относительно ближайшего родителя с position: relative
  • 'fixed' — поппер фиксирован относительно окна браузера, не зависит от скролла родителя

Пример:

const popperInstance = Popper.createPopper(reference, popper, {
  strategy: 'fixed'
});

onFirstUpdate

Описание: Функция обратного вызова, вызываемая после первого расчета позиции поппера. Позволяет получить доступ к данным о позиции, размерах и активных модификаторах.

const popperInstance = Popper.createPopper(reference, popper, {
  onFirstUpdate: (state) => {
    console.log('Начальное положение:', state.placement);
  }
});

state содержит:

  • placement — текущая позиция поппера
  • modifiersData — данные, собранные модификаторами
  • rects — размеры reference и popper

Продвинутая настройка модификаторов

Каждый модификатор можно тонко настраивать через options:

  • mainAxis и altAxis — контроль смещения по основной и альтернативной оси
  • tether — включает привязку к границе, предотвращая уход поппера слишком далеко
  • fallbackPlacements — список позиций, которые библиотека попробует при ограниченном пространстве

Пример комбинированного модификатора:

{
  name: 'preventOverflow',
  options: {
    mainAxis: true,
    altAxis: true,
    tether: true,
    boundary: document.body
  }
}

Динамическая смена опций

После создания экземпляра Popper.js можно обновлять параметры через метод setOptions:

popperInstance.setOptions({
  placement: 'top-end',
  modifiers: [
    { name: 'offset', options: { offset: [0, 16] } }
  ]
});

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

modifiersData и доступ к внутреннему состоянию

Каждый модификатор сохраняет результаты расчетов в state.modifiersData, что позволяет использовать эти данные для кастомного позиционирования. Например:

const { x, y } = popperInstance.state.modifiersData.popperOffsets;
popper.style.transform = `translate(${x}px, ${y}px)`;

Такой подход используется для интеграции с другими библиотеками анимации и визуального позиционирования.

Popper.js предоставляет гибкий и детальный контроль над позиционированием всплывающих элементов. Понимание всех параметров функции createPopper и модификаторов позволяет создавать сложные интерфейсы с адаптивным поведением на любых устройствах.

Оглавление