Placement в state

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

Popper.js поддерживает множество вариантов placement, которые можно задать при создании поппера через объект конфигурации:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'bottom-start',
});

Значение placement состоит из двух частей: основного направления и альтернативного смещения.

Основные направления

  • top — элемент появляется над reference.
  • bottom — элемент появляется под reference.
  • left — элемент появляется слева.
  • right — элемент появляется справа.

Эти направления определяют базовое положение поппера, без учета смещения по оси.

Альтернативное смещение (варианты)

Каждое основное направление может иметь дополнительный модификатор для выравнивания:

  • -start — выравнивание по началу reference элемента.
  • -end — выравнивание по концу reference элемента.

Примеры:

  • top-start — поппер расположен сверху, выровнен по левому краю reference.
  • bottom-end — поппер снизу, выровнен по правому краю reference.

Если смещение не задано, используется центрирование по оси основного направления (top, bottom, left, right без -start или -end).

Автоматический выбор позиции (auto)

Popper.js позволяет использовать динамический выбор позиции через auto:

placement: 'auto'

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

Также можно комбинировать auto с выравниванием:

placement: 'auto-start'
placement: 'auto-end'

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

Управление через state

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

popperInstance.state.placement
  • state.placement — текущее вычисленное положение поппера.
  • При использовании auto это значение может отличаться от заданного в конфиге, так как библиотека адаптирует позицию к реальному пространству.

Пример наблюдения за изменением:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'auto',
  modifiers: [{
    name: 'eventListeners',
    enabled: true,
  }],
});

console.log(popperInstance.state.placement); // 'bottom-start' или другое фактическое значение

Динамическое обновление placement

Popper.js позволяет менять placement после инициализации:

popperInstance.setOptions({
  placement: 'left-end',
});
popperInstance.update();

При этом объект state обновляется автоматически, отражая новую позицию и смещение поппера.

Влияние модификаторов на placement

Модификаторы, такие как flip и preventOverflow, напрямую влияют на выбор и корректировку placement:

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

Пример конфигурации:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'top',
  modifiers: [
    { name: 'flip', options: { fallbackPlacements: ['bottom', 'right', 'left'] } },
    { name: 'preventOverflow', options: { padding: 8 } }
  ],
});

В этом случае state.placement может динамически изменяться при изменении размеров окна или контейнера.

Использование кастомных функций для placement

Можно задать функцию для динамического расчета placement:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: ({ state, options }) => {
    if (state.rects.reference.width > 200) {
      return 'bottom';
    }
    return 'top';
  }
});

Функция получает объект state и options и возвращает строку с нужным placement. Это позволяет реализовать сложные правила адаптивного позиционирования.

Итоги по placement в state

  • placement — ключевой параметр позиционирования поппера.
  • state.placement отражает реальную позицию элемента после вычислений.
  • Модификаторы flip и preventOverflow могут изменять значение placement.
  • Возможна динамическая смена позиции через setOptions или кастомные функции.
  • auto, auto-start и auto-end обеспечивают адаптивное размещение на ограниченном пространстве.

placement в state — не просто настройка, а динамический индикатор, который позволяет понимать фактическое положение поппера и строить сложные интерфейсы с надежной адаптацией к экрану и контенту.

Оглавление