Padding для shift

Модификатор shift в библиотеке Floating UI отвечает за корректировку позиции всплывающих элементов (tooltip, dropdown, popover) в пределах заданного контейнера ограничения (boundary). Его основная задача — сместить элемент, если он выходит за границы видимой области, чтобы пользователь видел весь контент без обрезки.

Padding — это дополнительное пространство между границей контейнера и самим всплывающим элементом. Использование padding обеспечивает визуальный отступ, предотвращает прижатие элемента к краю окна или контейнера.

import { offset, shift, autoUpdate, computePosition } from '@floating-ui/dom';

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

computePosition(button, tooltip, {
  middleware: [
    offset(8),
    shift({ padding: 10 }) // добавляем padding
  ],
}).then(({ x, y }) => {
  Object.assign(tooltip.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});

В этом примере padding: 10 гарантирует, что всплывающее окно никогда не окажется ближе чем на 10 пикселей к границам контейнера, определённого библиотекой как viewport по умолчанию.

Конфигурация Padding

padding в shift может быть задан несколькими способами:

  1. Число — одинаковый отступ со всех сторон:
shift({ padding: 12 })

Добавляет 12 пикселей ко всем границам контейнера.

  1. Объект с индивидуальными отступами — позволяет задать разные значения для каждой стороны:
shift({
  padding: { top: 5, right: 10, bottom: 15, left: 20 }
})
  • top — верхний отступ
  • right — правый
  • bottom — нижний
  • left — левый

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

Влияние Padding на позиционирование

Padding напрямую влияет на расчёт позиции всплывающего элемента:

  • Без padding: элемент может упираться в границы окна или контейнера, создавая ощущение «прижатости».
  • С padding: вычислитель позиции учитывает дополнительное пространство, гарантируя визуальную «подушку».

Floating UI использует геометрические вычисления, где padding добавляется к ограничениям контейнера, корректируя координаты x и y.

Использование padding вместе с другими middleware

Padding в shift часто комбинируется с другими middleware для более точного позиционирования:

  1. offset — добавляет расстояние между целевым элементом и всплывающим элементом:
middleware: [offset(5), shift({ padding: 10 })]

Сначала применяется смещение (offset), затем проверяется граница с учётом padding.

  1. flip — позволяет перевернуть позицию, если элемент не помещается в текущей ориентации:
middleware: [shift({ padding: 8 }), flip()]

Padding гарантирует, что при перевороте элемент не упрётся в край окна слишком близко.

  1. autoPlacement — автоматически выбирает лучшую позицию:
middleware: [shift({ padding: { top: 10, left: 5 } }), autoPlacement()]

Объектные значения padding помогают Fine-tune расположение, особенно при сложных layout с разными ограничениями по сторонам.

Рекомендации по использованию

  • Минимальные значения padding: 4–8px для небольших элементов (tooltip, hint).
  • Средние значения: 10–16px для popover или dropdown, чтобы обеспечить комфортное расстояние от краёв окна.
  • Использовать объектный padding, если дизайн требует разной дистанции от верхней/нижней или левой/правой границы.
  • Комбинировать padding с flip и offset для надёжного позиционирования в сложных интерфейсах.

Подводные нюансы

  1. Padding учитывается только для shift, не влияет напрямую на offset или другие middleware.
  2. Значения padding суммируются с границами контейнера, поэтому при маленьких viewport можно наблюдать, что элемент всё равно подталкивается внутрь.
  3. Padding не меняет размер самого всплывающего элемента, он лишь корректирует координаты.

Практический пример

computePosition(reference, floating, {
  middleware: [
    offset(12),
    shift({ padding: { top: 8, bottom: 20, left: 10, right: 10 } }),
    flip({ fallbackPlacements: ['top', 'right', 'bottom', 'left'] })
  ],
}).then(({ x, y }) => {
  Object.assign(floating.style, {
    left: `${x}px`,
    top: `${y}px`,
  });
});

Здесь всплывающее окно сначала смещается на 12px (offset), затем проверяется, не выходит ли за границы с учётом padding, и при необходимости меняет сторону (flip). Такой подход обеспечивает точное и предсказуемое позиционирование элементов интерфейса.

Padding в shift — ключевой инструмент для аккуратного и безопасного позиционирования элементов в интерфейсе, особенно когда важно соблюсти визуальные границы и не допустить наложений на края окна.

Оглавление