Различные конфигурации для разных экранов

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

Использование медиазапросов для изменения позиции

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

const mediaQuery = window.matchMedia('(max-width: 768px)');

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: mediaQuery.matches ? 'bottom' : 'right',
});

В этом примере для экранов меньше 768px поппер будет отображаться снизу, а для больших экранов — справа. Такой подход позволяет динамически изменять позицию без пересоздания экземпляра, если использовать слушатель события change на MediaQueryList.

mediaQuery.addEventListener('change', (e) => {
  popperInstance.setOptions({
    placement: e.matches ? 'bottom' : 'right',
  });
});

Модификаторы с условиями для разных размеров экрана

Попперы могут иметь набор модификаторов, которые активируются только при определённых условиях. Например, модификатор preventOverflow можно настроить по-разному:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'right',
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: mediaQuery.matches ? 8 : 16,
        boundary: mediaQuery.matches ? referenceElement : 'viewport',
      },
    },
  ],
});

Здесь для маленьких экранов отступ ограничен 8px и границей является сам элемент, а для больших экранов — 16px и границей выступает весь viewport. Такой подход позволяет контролировать смещение и предотвращать выход за границы окна в зависимости от устройства.

Динамическая стратегия позиционирования

Popper.js поддерживает две стратегии позиционирования: absolute и fixed. Для мобильных экранов часто выбирается fixed, чтобы поппер оставался на месте при скролле:

popperInstance.setOptions({
  strategy: mediaQuery.matches ? 'fixed' : 'absolute',
});

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

Комбинация нескольких модификаторов для адаптивного поведения

Для сложных сценариев удобно создавать массив модификаторов, который меняется в зависимости от ширины экрана:

function getModifiers(screenWidth) {
  return [
    {
      name: 'offset',
      options: {
        offset: screenWidth < 768 ? [0, 10] : [0, 20],
      },
    },
    {
      name: 'flip',
      options: {
        fallbackPlacements: screenWidth < 768 ? ['top', 'bottom'] : ['left', 'right'],
      },
    },
  ];
}

popperInstance.setOptions({
  modifiers: getModifiers(window.innerWidth),
});

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

Адаптация контента и размеров поппера

Попперы часто содержат динамический контент, размер которого может меняться. Для мобильных устройств важно ограничивать ширину или изменять структуру контента:

const popperElement = document.querySelector('.popper');

if (window.innerWidth < 768) {
  popperElement.style.width = '90vw';
} else {
  popperElement.style.width = '300px';
}

Сочетание CSS и Popper.js обеспечивает правильное позиционирование независимо от размеров контента.

Использование autoUpdate для реагирования на изменения экрана

Popper.js предоставляет функцию autoUpdate, которая автоматически пересчитывает позицию поппера при изменении размера экрана или прокрутке:

import { autoUpdate } from '@popperjs/core';

autoUpdate(referenceElement, popperElement, popperInstance.update);

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

Практическая стратегия

  1. Определить ключевые точки экранов и соответствующие позиции попперов.
  2. Использовать медиазапросы или window.innerWidth для определения текущего состояния.
  3. Настроить модификаторы (offset, preventOverflow, flip) под конкретный размер экрана.
  4. Динамически изменять стратегию позиционирования для корректного поведения на мобильных устройствах.
  5. Применять autoUpdate для постоянной актуализации позиции при изменении размеров и прокрутке.

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

Оглавление