Синтаксис задания offset

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

offset определяется в конфигурации Popper через модуль offset, который подключается через объект modifiers. Основной синтаксис имеет вид:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: [skx, sky]
    }
  }
]
  • skx — смещение по основной оси (Main Axis). При позиции top или bottom это вертикальный сдвиг, при left или right — горизонтальный.
  • sky — смещение по перекрестной оси (Cross Axis). Противоположная основная оси, т.е. при top или bottom — горизонталь, при left или right — вертикаль.

Значения могут быть положительными или отрицательными числами, определяющими направление смещения:

  • Положительное значение сдвигает поппер в сторону направления оси.
  • Отрицательное значение сдвигает поппер в противоположную сторону.

Пример:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  placement: 'bottom',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10] // смещаем на 10px вниз относительно нижнего края referenceElement
      }
    }
  ]
});

Использование функции для динамического смещения

Popper.js позволяет задавать offset не только в виде статических чисел, но и через функцию, возвращающую массив [skx, sky]. Это удобно для динамических интерфейсов, где смещение зависит от размеров элементов, видимости окна или других факторов.

modifiers: [
  {
    name: 'offset',
    options: {
      offset: ({ placement, reference, popper }) => {
        if (placement.startsWith('top')) {
          return [0, -reference.offsetHeight / 2]; // сдвиг вверх на половину высоты reference
        }
        return [0, 10]; // стандартный сдвиг для остальных случаев
      }
    }
  }
]

Параметры функции:

  • placement — текущее расположение поппера (top, bottom, left, right и их вариации).
  • reference — DOM-элемент якоря, для которого создается поппер.
  • popper — DOM-элемент всплывающего окна.

Отдельные стратегии смещения

Popper.js поддерживает смещения через строки в формате CSS, например "10px, 20px" или "0, 0". Такой способ позволяет сразу задавать единицы измерения и использовать отрицательные значения:

modifiers: [
  {
    name: 'offset',
    options: {
      offset: '0, 20px' // сдвиг по основной оси 0px, по перекрестной 20px
    }
  }
]

При этом важно помнить, что строки должны соответствовать формату [mainAxis, crossAxis], иначе библиотека не сможет корректно интерпретировать смещение.

Примеры смещения в разных позициях

  • top — основной сдвиг вертикальный вверх/вниз, перекрестный — горизонтальный:
offset: [0, 10] // поднимает или опускает на 10px
  • bottom — основной сдвиг вертикальный вниз/вверх, перекрестный — горизонтальный:
offset: [0, 15] // опускает на 15px
  • left — основной сдвиг горизонтальный влево/вправо, перекрестный — вертикальный:
offset: [10, 0] // смещает на 10px вправо
  • right — основной сдвиг горизонтальный вправо/влево, перекрестный — вертикальный:
offset: [-10, 0] // смещает на 10px влево

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

offset эффективно работает вместе с модификаторами preventOverflow и flip. При этом смещение учитывается после всех ограничений и корректировок положения поппера. Например:

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

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

Ключевые моменты синтаксиса offset

  • Формат массива [skx, sky] предпочтителен для большинства случаев.
  • Функция для динамического расчета позволяет учитывать размеры элементов и текущее расположение.
  • Положительные и отрицательные значения управляют направлением смещения.
  • Совместим с модификаторами управления позиционированием (flip, preventOverflow).
  • Можно использовать строки с CSS-единицами, но массивы чисел более гибкие и стабильные.

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

Оглавление