Типы Options

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

Объект options может содержать несколько ключевых свойств, каждое из которых влияет на поведение и позиционирование поппера.

placement

Свойство placement определяет изначальное расположение поппера относительно таргета. Оно принимает строковые значения:

  • top — выше таргета
  • bottom — ниже таргета
  • left — слева от таргета
  • right — справа от таргета

Можно уточнять точку привязки с помощью варианта -start или -end:

placement: 'top-start' // поппер будет выше и сдвинут к левому краю таргета
placement: 'bottom-end' // поппер будет снизу и сдвинут к правому краю таргета

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

modifiers

modifiers — массив объектов, влияющих на поведение поппера. Каждый модификатор содержит следующие поля:

  • name — уникальное имя модификатора
  • enabled — логическое значение, включен ли модификатор
  • phase — стадия, на которой применяется модификатор (read, main, write)
  • fn — функция, реализующая логику модификатора
  • options — дополнительные настройки модификатора

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

  • offset — задает отступ поппера от таргета:
modifiers: [{
  name: 'offset',
  options: {
    offset: [0, 10] // горизонтальный и вертикальный сдвиг
  }
}]
  • flip — позволяет попперу изменять позицию при нехватке места:
modifiers: [{
  name: 'flip',
  options: {
    fallbackPlacements: ['top', 'right', 'left'] // альтернативные позиции
  }
}]
  • preventOverflow — ограничивает выход поппера за границы окна или контейнера:
modifiers: [{
  name: 'preventOverflow',
  options: {
    boundary: 'viewport', // границы для проверки
    padding: 8            // минимальный отступ
  }
}]
  • arrow — управляет положением стрелки поппера:
modifiers: [{
  name: 'arrow',
  options: {
    element: '.arrow' // селектор или DOM-элемент стрелки
  }
}]

strategy

Свойство strategy задает тип позиционирования CSS для поппера:

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

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

strategy: 'fixed'

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

onFirstUpdate

Функция onFirstUpdate вызывается при первом расчете позиции поппера:

onFirstUpdate: (state) => {
  console.log('Поппер установлен на позицию:', state.placement);
}

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

Особенности работы с modifiers и options

  1. Приоритет модификаторов определяется их порядком в массиве: первые модификаторы влияют на последующие.
  2. Настройки модификаторов могут быть изменены динамически через метод update экземпляра поппера.
  3. Фазы модификаторов (read, main, write) позволяют оптимизировать процесс расчета и избежать лишних перерисовок.

Пример комплексной конфигурации:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'bottom-start',
  strategy: 'fixed',
  modifiers: [
    {
      name: 'offset',
      options: { offset: [0, 12] }
    },
    {
      name: 'flip',
      options: { fallbackPlacements: ['top', 'right'] }
    },
    {
      name: 'preventOverflow',
      options: { boundary: 'viewport', padding: 5 }
    },
    {
      name: 'arrow',
      options: { element: '.arrow' }
    }
  ],
  onFirstUpdate: (state) => {
    console.log('Начальное положение поппера:', state.placement);
  }
});

Эта конфигурация демонстрирует базовые возможности Popper.js: позиционирование с уточнением, динамическая подстройка при нехватке места, управление отступами, стрелкой и фиксированной стратегией.

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

  • placement задает начальное расположение поппера, а flip обеспечивает адаптивность.
  • modifiers дают полный контроль над поведением: от смещений до предотвращения выхода за границы.
  • strategy определяет тип CSS-позиционирования и влияет на реакцию на скролл.
  • onFirstUpdate позволяет реагировать на первый рендер и корректировать состояние поппера.

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

Оглавление