Смещение по осям X и Y

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

Свойство modifiers и offset

Для задания смещения используется модификатор offset, который подключается через массив modifiers при создании экземпляра Popper:

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

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

createPopper(reference, popper, {
  placement: 'top',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8], // [смещение по X, смещение по Y]
      },
    },
  ],
});

Здесь offset: [skidding, distance] задаёт два параметра:

  • Skidding (смещение по оси X) — сдвигает поппер параллельно основной оси (горизонтально при top/bottom, вертикально при left/right).
  • Distance (смещение по оси Y) — увеличивает или уменьшает расстояние между целевым элементом и поппером вдоль основной оси.

Понимание координатной системы

  • Ось X (горизонтальная) направлена слева направо. Положительное значение сдвигает поппер вправо относительно его стандартной позиции.
  • Ось Y (вертикальная) направлена сверху вниз. Положительное значение увеличивает расстояние между элементами по основной оси (например, при placement: 'top' popper смещается вниз).

При использовании отрицательных значений смещение происходит в противоположную сторону:

offset: [-10, -5] // X сдвиг на 10 пикселей влево, Y — на 5 пикселей вверх

Динамическое смещение

Popper.js позволяет использовать функции для динамического расчета смещения:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: ({ placement, reference, popper }) => {
        if (placement.startsWith('top')) {
          return [0, -10]; // поднимаем поппер выше reference
        } else {
          return [0, 10]; // опускаем поппер ниже reference
        }
      },
    },
  },
],

Функция получает объект с ключами: placement, reference, popper, что позволяет рассчитывать смещение в зависимости от контекста и размеров элементов.

Интеграция с другими модификаторами

Смещение работает совместно с другими модификаторами:

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

Примеры практического использования

  1. Сдвиг тултипа немного вправо и вниз от кнопки:
offset: [10, 5]
  1. Поднятие подсказки над элементом с небольшим смещением влево:
offset: [-5, -8]
  1. Динамическое смещение в зависимости от ширины окна:
offset: ({ reference }) => {
  const screenWidth = window.innerWidth;
  return screenWidth < 600 ? [0, 4] : [0, 12];
}

Тонкости работы со смещением

  • Смещение всегда учитывается после вычисления основной позиции, поэтому оно не заменяет placement, а корректирует его.
  • Для комплексных интерфейсов важно проверять взаимодействие offset с flip и preventOverflow, чтобы попперы не перекрывали важные элементы или не выходили за границы экрана.
  • В некоторых случаях удобнее использовать процентные значения для смещения, вычисляя их через функции, чтобы обеспечить адаптивное позиционирование.

Выводы по использованию смещения

  • offset — основной инструмент для точной настройки позиции.
  • Параметры [skidding, distance] позволяют контролировать горизонтальное и вертикальное смещение независимо.
  • Динамические функции дают возможность создавать адаптивные интерфейсы, где положение попперов зависит от размера и положения окна, а также других элементов.
  • Корректная комбинация с другими модификаторами обеспечивает гибкое и безопасное позиционирование, предотвращая перекрытия и вылеты за пределы видимой области.

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

Оглавление