Конфигурация отдельных модификаторов

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

Структура модификатора

Каждый модификатор задается объектом со следующими ключевыми свойствами:

  • name — уникальный идентификатор модификатора, например "offset" или "flip".

  • enabled — логическое значение, включающее или отключающее модификатор. По умолчанию true.

  • phase — этап жизненного цикла поппера, на котором выполняется модификатор. Основные фазы:

    • "beforeRead"
    • "read"
    • "afterRead"
    • "beforeMain"
    • "main"
    • "afterMain"
    • "beforeWrite"
    • "write"
    • "afterWrite"

  • fn — основная функция модификатора, принимающая объект с состоянием поппера (state) и вспомогательные данные (options).

  • options — объект конфигурации, специфичный для данного модификатора.

  • requires — массив имен модификаторов, от которых зависит текущий модификатор.

Пример базовой структуры модификатора:

const offsetModifier = {
  name: 'offset',
  enabled: true,
  phase: 'main',
  fn: ({ state, options }) => {
    // логика смещения поппера
  },
  options: {
    offset: [0, 10]
  }
};

Настройка встроенных модификаторов

Popper.js поставляется с набором стандартных модификаторов. Встроенные модификаторы можно подключать и настраивать через объект modifiers при создании поппера:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8] // горизонтальное и вертикальное смещение
      }
    },
    {
      name: 'preventOverflow',
      options: {
        padding: 10,      // отступ от границ контейнера
        boundary: 'viewport' // граница, относительно которой проверяется выход
      }
    },
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['top', 'right', 'bottom', 'left'] // альтернативные позиции
      }
    }
  ]
});
Смещение (offset)

Модификатор offset изменяет положение поппера относительно референс-элемента. Опция offset принимает массив [skidding, distance]:

  • skidding — смещение по оси X для горизонтальных положений или по оси Y для вертикальных.
  • distance — смещение по основной оси (направление поппера относительно референса).
options: {
  offset: [10, 20]
}
Предотвращение выхода за границы (preventOverflow)

Модификатор preventOverflow контролирует, чтобы поппер не выходил за пределы заданной границы (boundary). Основные опции:

  • padding — минимальное расстояние до границы.
  • boundary — элемент, относительно которого проверяется выход (viewport, scrollParent, clippingParents).
  • altAxis — включает корректировку по второстепенной оси.
options: {
  padding: 5,
  boundary: 'clippingParents',
  altAxis: true
}
Переключение позиций (flip)

Модификатор flip автоматически меняет положение поппера, если исходная позиция приводит к выходу за границы. Основные опции:

  • fallbackPlacements — массив альтернативных позиций для перебора.
  • padding — отступ от границ при проверке.
  • boundary — граница для проверки выхода.
options: {
  fallbackPlacements: ['bottom', 'right', 'top', 'left'],
  padding: 8
}

Создание пользовательских модификаторов

Можно создавать собственные модификаторы для специфических задач:

const customModifier = {
  name: 'logState',
  enabled: true,
  phase: 'write',
  fn: ({ state }) => {
    console.log('Текущее положение поппера:', state.placement);
  }
};

Добавление в конфигурацию Popper:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  modifiers: [customModifier]
});

Особенности создания пользовательских модификаторов:

  • phase определяет момент выполнения (main для изменения данных, write для обновления DOM).
  • Можно использовать requires для указания зависимости от других модификаторов.
  • options позволяют передавать настройки в функцию fn.

Управление порядком модификаторов

Модификаторы выполняются в порядке их определения в массиве modifiers. Зависимые модификаторы можно явно указать через свойство requires. Если зависимость не соблюдена, Popper.js выбросит предупреждение.

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'arrow',
      options: { element: arrowElement },
      requires: ['popperOffsets']
    }
  ]
});

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

Поппер позволяет изменять параметры модификаторов после инициализации через метод setOptions:

popperInstance.setOptions({
  modifiers: [
    {
      name: 'offset',
      options: { offset: [0, 16] }
    }
  ]
});

Это позволяет адаптировать поведение поппера в зависимости от изменений DOM, размеров окна или пользовательских действий.

Если нужно, я могу подготовить подробную таблицу всех стандартных модификаторов Popper.js с их ключевыми опциями, чтобы она могла служить как готовый справочник для учебника. Это будет естественное продолжение темы конфигурации. Хочешь, чтобы я это сделал?

Оглавление