Терминология: reference, popper, placement

Popper.js — это библиотека для управления позиционированием элементов в веб-приложениях. Центральными понятиями в ней являются reference, popper и placement. Понимание этих терминов критически важно для правильного использования библиотеки.

Reference

Reference — это элемент, относительно которого происходит позиционирование. Он служит точкой отсчёта для расчёта положения всплывающего блока или подсказки. Reference может быть любым DOM-элементом: кнопкой, ссылкой, картинкой, контейнером.

Особенности reference:

  • Не обязательно быть видимым: даже скрытые элементы можно использовать как reference, но это может повлиять на расчёт размеров.
  • Динамическая позиция: библиотека отслеживает изменения размеров и положения reference и корректирует popper автоматически.
  • Взаимодействие с Scroll и Overflow: Popper учитывает смещение reference при прокрутке или внутри контейнеров с overflow.

Пример создания reference:

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

Popper

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

Особенности popper:

  • Автоматическое позиционирование: библиотека вычисляет оптимальное положение, учитывая размеры reference, viewport и заданные ограничения.
  • Адаптивность: при изменении размеров окна или смещении reference popper перестраивается динамически.
  • Модификаторы: Popper позволяет подключать дополнительные функции, которые управляют поведением popper — например, смещение, смягчение столкновений, ограничение по контейнерам.

Пример создания popper:

const popper = Popper.createPopper(reference, document.querySelector('#tooltip'), {
  placement: 'top'
});

Placement

Placement определяет, где относительно reference будет располагаться popper. Это одно из ключевых свойств конфигурации Popper.js.

Возможные значения:

  • Основные позиции: top, bottom, left, right.
  • Комбинированные позиции: top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end.

Принципы работы placement:

  • Начальное положение: указанный placement задаёт предпочтительное положение popper относительно reference.
  • Автоматическая корректировка: если выбранное положение приводит к выходу popper за границы окна, библиотека может автоматически изменить его на альтернативное.
  • Процентное смещение: можно использовать дополнительные настройки модификаторов для точной подгонки позиции.

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

const popper = Popper.createPopper(reference, document.querySelector('#tooltip'), {
  placement: 'right-start',
});

Взаимосвязь Reference, Popper и Placement

  • Reference — отправная точка, определяет положение popper.
  • Popper — элемент, который позиционируется относительно reference.
  • Placement — правило, по которому определяется расположение popper относительно reference.

Эти три термина формируют фундамент понимания Popper.js. Правильное использование reference и popper с грамотным выбором placement позволяет создавать динамичные, адаптивные интерфейсы, где элементы точно подстраиваются под контекст страницы.

Дополнительные нюансы

  • Scroll и Resize: Popper.js автоматически пересчитывает позицию popper при прокрутке или изменении размера окна.
  • Гибкость модификаторов: модификаторы позволяют управлять поведением popper без вмешательства в DOM вручную.
  • Контекстные ограничения: popper можно ограничить в пределах конкретного контейнера, чтобы он не выходил за его границы.

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

Оглавление