Процентные и абсолютные значения

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

В Popper.js ключевым аспектом является использование modifiers — функций, которые изменяют поведение позиционирования. Среди них особое значение имеют offset, preventOverflow и flip, которые напрямую взаимодействуют с абсолютными и процентными величинами.

Абсолютные значения

Абсолютные значения задаются в пикселях (px) и определяют фиксированное смещение относительно reference element. Например, использование offset: [10, 20] означает, что Popper будет смещён на 10 пикселей по оси X и на 20 пикселей по оси Y от вычисленной позиции.

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

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

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

createPopper(button, tooltip, {
  placement: 'bottom',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 15], // смещение на 15px вниз
      },
    },
  ],
});

В этом примере tooltip будет точно на 15 пикселей ниже кнопки. Абсолютные значения удобны, когда требуется строгий контроль над позиционированием и известны размеры элементов.

Процентные значения

Процентные значения позволяют задавать смещение относительно размеров reference element. В Popper.js они реализуются через строковые значения с указанием %. Например, offset: '50%' означает смещение на половину ширины или высоты reference element, в зависимости от выбранной оси.

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

createPopper(button, tooltip, {
  placement: 'right',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: ['50%', 0], // смещаем на 50% ширины кнопки вправо
      },
    },
  ],
});

Важный момент: процентное значение всегда вычисляется относительно размера reference element, а не окна или body. Это позволяет создавать адаптивные интерфейсы, где tooltip или popover автоматически подстраиваются под размер родительского элемента.

Смешанное использование

Popper.js поддерживает комбинированное использование абсолютных и процентных величин. Это делается с помощью массива [xOffset, yOffset], где каждая координата может быть как пикселями, так и процентами:

offset: ['25%', 10] // смещение на 25% ширины reference element по X и 10px по Y

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

Работа с различными позициями

Popper.js предоставляет множество вариантов placement: top, bottom, left, right, а также их комбинации с -start и -end. Процентные и абсолютные значения смещения будут применяться относительно начальной точки выбранного placement.

Например:

  • placement: 'top-start' + offset: [10, 20] — tooltip смещается на 10px вправо и 20px вверх от верхнего левого угла reference element.
  • placement: 'bottom' + offset: ['50%', 0] — tooltip будет центрирован по горизонтали относительно reference element, с нулевым вертикальным смещением.

Влияние модификаторов на абсолютные и процентные значения

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

  2. flip При использовании flip Popper может менять placement в зависимости от доступного пространства. Процентные смещения будут пересчитаны автоматически для нового placement, сохраняя относительное смещение относительно reference element.

  3. arrow Если используется стрелка (arrow), Popper учитывает ее размер при применении offset. При процентных смещениях это позволяет динамически позиционировать стрелку по центру reference element.

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

  • Для фиксированного интерфейса с известными размерами элементов лучше использовать абсолютные значения в пикселях.
  • Для адаптивных интерфейсов, где размеры reference element могут меняться, предпочтительнее процентные смещения.
  • При комбинировании пикселей и процентов всегда проверять результат в разных разрешениях, чтобы избежать неожиданных сдвигов.
  • В сложных UI часто применяют offset с функцией, возвращающей массив [x, y], чтобы динамически вычислять смещение в зависимости от размеров элементов:
modifiers: [
  {
    name: 'offset',
    options: {
      offset: ({ placement, reference, popper }) => {
        return [reference.width * 0.2, 10]; // 20% ширины reference по X и 10px по Y
      },
    },
  },
]

Такой подход сочетает гибкость процентных значений и точность пиксельного позиционирования, обеспечивая полноценный контроль над расположением Popper-элементов.

Оглавление