Динамическое изменение настроек

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

1. Обновление опций через setOptions

Каждый экземпляр Popper создается с набором опций, передаваемых при инициализации:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'bottom',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8],
      },
    },
  ],
});

Для динамического изменения параметров используется метод setOptions. Он позволяет обновить любые настройки, включая позицию (placement), смещения (offset), стратегии (strategy) и модификаторы (modifiers):

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

После вызова setOptions Popper автоматически пересчитывает положение всплывающего элемента с учетом новых настроек.

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

  • Любые изменения через setOptions выполняются немедленно, но пересчет позиции может занять несколько миллисекунд.
  • Можно комбинировать старые и новые модификаторы, перезаписывая только те, которые требуется изменить.

2. Динамическая смена позиции (placement)

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

function updatePlacement(isDropdownAbove) {
  popperInstance.setOptions({
    placement: isDropdownAbove ? 'top-start' : 'bottom-end',
  });
}

Поппер автоматически применяет флип-модификатор (если он включен) для предотвращения выхода за пределы видимой области.

popperInstance.setOptions({
  modifiers: [
    { name: 'flip', options: { fallbackPlacements: ['top', 'right', 'left'] } }
  ]
});

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

3. Изменение смещения (offset)

Модификатор offset управляет смещением всплывающего элемента относительно reference. Его динамическая настройка позволяет точно подгонять расположение:

popperInstance.setOptions({
  modifiers: [
    {
      name: 'offset',
      options: { offset: [10, 20] },
    },
  ],
});

Советы по применению:

  • Первый элемент массива [x, y] — горизонтальное смещение.
  • Второй элемент [x, y] — вертикальное смещение.
  • Используется для добавления отступов, корректировки позиционирования при изменении размеров окна или элементов.

4. Управление стратегией позиционирования (strategy)

Popper поддерживает две стратегии: absolute и fixed. Динамическое изменение стратегии позволяет контролировать поведение при скролле и внутри контейнеров с overflow:

popperInstance.setOptions({
  strategy: 'fixed'
});
  • absolute — позиционирование относительно ближайшего родителя с position: relative.
  • fixed — позиционирование относительно окна просмотра. Полезно для всплывающих элементов поверх фиксированных контейнеров.

5. Динамическое включение и отключение модификаторов

Модификаторы можно активировать или деактивировать на лету с помощью свойства enabled:

popperInstance.setOptions({
  modifiers: [
    { name: 'preventOverflow', enabled: false },
    { name: 'flip', enabled: true },
  ],
});

Это позволяет:

  • Временно отключить автоматическое предотвращение выхода за границы.
  • Включить дополнительные правила только при необходимости.

6. Обновление Popper вручную

Даже после изменения опций иногда требуется принудительно пересчитать позицию:

popperInstance.update();

update() пересчитывает координаты элемента с учетом текущих настроек и состояния DOM. Это полезно при динамических изменениях контента внутри reference или popper элементов.

7. Использование функции для динамических опций

Для еще более гибкого управления можно передавать функцию в setOptions, возвращающую объект с настройками:

popperInstance.setOptions(() => ({
  placement: window.innerWidth < 600 ? 'bottom' : 'right',
  modifiers: [
    { name: 'offset', options: { offset: [0, 12] } }
  ]
}));

Такой подход позволяет адаптировать Popper под любые изменения интерфейса в реальном времени.

8. Практические сценарии

  • Изменение позиции тултипа при ресайзе окна.
  • Настройка смещения для анимации dropdown.
  • Переключение стратегии на fixed для модальных окон поверх скроллящихся контейнеров.
  • Включение или отключение модификаторов в зависимости от контекста (например, включение flip только на мобильных устройствах).

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

Оглавление