Padding параметры

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

Формат значения padding

Popper.js поддерживает несколько форматов задания padding:

  1. Число Если передано одно число, оно применяется одинаково ко всем сторонам.

    const popper = createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: 8
      }
    }
  ]
});

    Здесь 8 пикселей добавляется ко всем сторонам: сверху, снизу, слева и справа.

  2. Объект с конкретными сторонами Позволяет задавать отступы индивидуально для каждой стороны:

    const popper = createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: {
          top: 10,
          right: 15,
          bottom: 10,
          left: 5
        }
      }
    }
  ]
});

    В данном случае верхний и нижний отступ составляют 10px, правый — 15px, левый — 5px.

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

Модификатор preventOverflow отвечает за предотвращение выхода поппера за пределы контейнера или окна браузера. Параметр padding расширяет «зону безопасности», в пределах которой поппер может двигаться:

  • Без padding: поппер может прижаться к границе контейнера вплотную.
  • С padding: поппер будет ограничен отступом от границы, что предотвращает визуальный «прилипание» к краям.
const popper = createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        padding: 20
      }
    }
  ]
});

В этом примере поппер не сможет приблизиться к краю окна ближе, чем на 20px.

Padding и модификатор flip

Модификатор flip позволяет попперу автоматически менять позицию при недостатке места. Параметр padding влияет и на него:

  • Поппер будет «отталкиваться» от границ контейнера на величину padding при проверке доступного места.
  • Это предотвращает ситуацию, когда элемент меняет сторону, но оказывается слишком близко к краю.
const popper = createPopper(referenceElement, popperElement, {
  placement: 'top',
  modifiers: [
    {
      name: 'flip',
      options: {
        padding: { top: 10, bottom: 10, left: 5, right: 5 }
      }
    }
  ]
});

Особенности применения

  1. Комбинация с tether При включенном tether (модификатор preventOverflow с tether: true) padding определяет минимальное расстояние поппера от целевого элемента и границ.

  2. Единицы измерения Popper.js работает только с числами, которые интерпретируются как пиксели. Проценты или rem/em не поддерживаются напрямую.

  3. Наследуемость padding Модификатор preventOverflow с заданным padding применяется только к ограничению позиции. Он не влияет на внутренние отступы popper-контента.

Практические советы

  • Для компактных всплывающих элементов (tooltips) достаточно padding 4–8px.
  • Для больших меню или dropdown’ов рекомендуется 12–20px, чтобы обеспечить визуальный «воздух» между границей окна и элементом.
  • Использование разных значений для каждой стороны позволяет учитывать особенности дизайна и расположение элементов на странице.

Взаимодействие с другими модификаторами

  • offset – задает смещение поппера относительно reference element. Padding не заменяет offset, а работает совместно, корректируя положение с учетом границ.
  • arrow – для стрелки поппера padding учитывается при расчете положения стрелки, чтобы она не «врезалась» в границы окна.
const popper = createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'arrow',
      options: {
        element: arrowElement
      }
    },
    {
      name: 'preventOverflow',
      options: {
        padding: { top: 8, right: 12, bottom: 8, left: 12 }
      }
    }
  ]
});

В этом случае стрелка правильно позиционируется внутри отступов, обеспечивая корректную визуальную привязку к reference element.

Оглавление