Media queries

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

Модификатор preventOverflow с адаптацией под размеры экрана

Модификатор preventOverflow предотвращает выход всплывающего элемента за границы контейнера. Для работы с медиа-запросами можно динамически менять параметры модификатора в зависимости от ширины экрана:

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

const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');

const popperInstance = createPopper(button, tooltip, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: 8,
        altAxis: true,
        mainAxis: true,
      },
    },
  ],
});

Для адаптации под различные размеры экрана используется JavaScript API matchMedia:

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

function updatePopper() {
  if (mediaQuery.matches) {
    popperInstance.setOptions({
      modifiers: [
        {
          name: 'preventOverflow',
          options: { padding: 4 },
        },
        { name: 'flip', options: { fallbackPlacements: ['top', 'bottom'] } },
      ],
    });
  } else {
    popperInstance.setOptions({
      modifiers: [
        {
          name: 'preventOverflow',
          options: { padding: 16 },
        },
        { name: 'flip', options: { fallbackPlacements: ['left', 'right'] } },
      ],
    });
  }
}

mediaQuery.addEventListener('change', updatePopper);
updatePopper();

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

Динамическая смена позиции с помощью flip

Модификатор flip автоматически выбирает альтернативное расположение, если исходное место недоступно. В связке с media queries он позволяет создавать адаптивные тултипы и выпадающие меню:

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

Здесь для мобильных устройств предпочтение отдаётся вертикальным позициям (top/bottom), тогда как на больших экранах используются горизонтальные (left/right).

Использование offset для адаптивного смещения

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

const popperInstance = createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: mediaQuery.matches ? [0, 4] : [0, 12],
      },
    },
  ],
});
  • [0, 4] — смещение по горизонтали и вертикали для мобильных экранов
  • [0, 12] — смещение для десктопов

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

Комбинированная стратегия для сложных интерфейсов

Для сложных UI компонентов, таких как контекстные меню или выпадающие панели с разными состояниями, часто требуется комбинировать несколько модификаторов с медиа-запросами:

const popperInstance = createPopper(button, tooltip, {
  placement: 'bottom',
  modifiers: [
    { name: 'flip', options: { fallbackPlacements: ['top'] } },
    { name: 'preventOverflow', options: { padding: 8 } },
    { 
      name: 'offset',
      options: { offset: mediaQuery.matches ? [0, 4] : [0, 16] },
    },
  ],
});

С помощью события change у matchMedia можно автоматически пересчитывать все параметры Popper при изменении размера окна, обеспечивая адаптивное поведение интерфейса в реальном времени.

Практическое применение

  1. Тултипы и подсказки — смещаются под элементы на маленьких экранах и сбоку на больших.
  2. Выпадающие меню — вертикальная ориентация на мобильных, горизонтальная на десктопе.
  3. Модальные подсказки — предотвращение выхода за границы экрана с различными паддингами.

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

Оглавление