Константы и enums

В библиотеке Popper.js константы и перечисления (enums) играют ключевую роль при конфигурации поведения попперов и их модификаторов. Они позволяют задавать предопределённые значения для свойств, обеспечивая корректное позиционирование элементов на странице и упрощая управление логикой смещения, ограничения и смарт-позиционирования.

Placement – направление поппера

Константа Placement определяет, где будет располагаться поппер относительно reference element. В Popper.js значения placement представлены как строки и допускают комбинированные варианты с направлением и вариациями.

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

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

    • "top"
    • "bottom"
    • "left"
    • "right"

  • Вариации с выравниванием:

    • "top-start" и "top-end"
    • "bottom-start" и "bottom-end"
    • "left-start" и "left-end"
    • "right-start" и "right-end"

Особенности использования:

  • "start" выравнивает поппер по левому или верхнему краю reference element в зависимости от направления.
  • "end" выравнивает по правому или нижнему краю.

Пример использования в конфигурации:

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

ModifierPhases – фазы работы модификаторов

Каждый модификатор в Popper.js выполняется в определённой фазе жизненного цикла. Перечисление ModifierPhases помогает корректно указывать фазу выполнения модификатора.

Доступные фазы:

  • "beforeRead" – выполняется до чтения размеров элементов.
  • "read" – фаза, где вычисляются размеры reference и popper.
  • "afterRead" – после чтения размеров, до модификации данных.
  • "beforeMain" – подготовительная фаза перед основной логикой модификатора.
  • "main" – основная фаза работы модификатора.
  • "afterMain" – после основной логики модификатора, для доработки данных.
  • "beforeWrite" – подготовка данных перед записью в DOM.
  • "write" – фаза непосредственной записи изменений в DOM.
  • "afterWrite" – финальная фаза после всех изменений.

Пример создания кастомного модификатора с фазой:

const customModifier = {
  name: 'logPlacement',
  phase: 'afterWrite', // Используем константу ModifierPhases.afterWrite
  fn({ state }) {
    console.log('Текущее положение:', state.placement);
  },
};

Boundary – ограничения для поппера

Popper.js позволяет ограничивать область, в которой может отображаться popper, через параметр boundary. Константа Boundary определяет варианты ограничения.

Основные значения:

  • "clippingParents" – поппер не выходит за пределы ближайших родительских элементов с overflow, которые обрезают содержимое.
  • "viewport" – поппер не выходит за границы видимой области окна.
  • "window" – учитывает весь window объект для ограничения.
  • DOM-элемент – можно передать любой конкретный элемент в качестве границы.

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

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  modifiers: [{
    name: 'preventOverflow',
    options: {
      boundary: 'viewport',
    },
  }],
});

Strategy – стратегия позиционирования

Стратегия позиционирования определяет, каким образом Popper.js будет вычислять координаты popper-элемента.

Доступные значения:

  • "absolute" – стандартное абсолютное позиционирование относительно ближайшего позиционированного предка.
  • "fixed" – фиксированное позиционирование относительно окна браузера.

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

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  strategy: 'fixed',
});

Offset – смещение поппера

Смещение поппера относительно reference element может задаваться как константа или функция.

Форматы значения offset:

  • Массив [skidding, distance]

    • skidding – смещение по основной оси (горизонталь или вертикаль в зависимости от placement)
    • distance – смещение по перпендикулярной оси

  • Функция с аргументом state, возвращающая массив [skidding, distance]

Пример:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 10], // 10px от основной оси
      },
    },
  ],
});

Итоговая структура перечислений

Enum/Константа Назначение Примеры значений
Placement Позиция поппера относительно reference "top", "bottom-end"
ModifierPhases Фазы работы модификатора "beforeRead", "write"
Boundary Область ограничения popper "viewport", DOM-элемент
Strategy Тип позиционирования "absolute", "fixed"
Offset Смещение поппера [0, 10] или функция

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

Оглавление