Параметры limiter

Библиотека Floating UI предоставляет мощный инструмент для создания всплывающих элементов, таких как тултипы, меню, модальные окна и поповеры. Одной из ключевых возможностей является точное управление позиционированием через параметры limiter, позволяющие ограничивать область, в которой может находиться всплывающий элемент.

Назначение limiter

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

limiter обеспечивает:

  • Контроль границ движения элемента.
  • Поддержку адаптивного позиционирования при изменении размеров окна.
  • Согласованное поведение при scroll и overflow родительских элементов.

Синтаксис и структура

limiter является функцией, которая возвращает объект с конфигурацией ограничения. Основной синтаксис:

import { offset, flip, shift, limitShift } from '@floating-ui/dom';

const limiterConfig = {
  limiter: ({ rects, placement }) => {
    return {
      top: 0,
      right: 0,
      bottom: 500,
      left: 0,
    };
  }
};
  • rects – объект с размерами и позициями reference и floating элементов.
  • placement – строка с текущим расположением всплывающего элемента (top, bottom, left, right).
  • Возвращаемый объект определяет границы: top, right, bottom, left.

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

  1. Ограничение в пределах родителя

Если необходимо, чтобы всплывающее окно не выходило за пределы контейнера:

const container = document.querySelector('.container');

const limiter = ({ rects }) => {
  const containerRect = container.getBoundingClientRect();
  return {
    top: containerRect.top,
    right: containerRect.right,
    bottom: containerRect.bottom,
    left: containerRect.left
  };
};
  1. Динамическая адаптация к экрану

Чтобы всплывающее окно всегда оставалось видимым на экране, можно использовать размеры window:

const limiter = () => ({
  top: 0,
  right: window.innerWidth,
  bottom: window.innerHeight,
  left: 0
});
  1. Ограничение по смещению

limiter можно комбинировать с модификаторами shift и flip для смещения элемента в пределах допустимой зоны:

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

computePosition(reference, floating, {
  middleware: [
    offset(10),
    flip(),
    shift({ limiter })
  ]
});

В этом примере shift обеспечивает корректное смещение элемента так, чтобы он оставался в границах, заданных limiter.

Кастомизация поведения

limiter позволяет реализовать сложные правила:

  • Асимметричные ограничения: можно установить разные отступы для каждой стороны.
  • Учет размеров floating элемента: можно возвращать границы с учетом размеров всплывающего окна для предотвращения обрезки.
  • Интерактивные элементы: ограничение может изменяться при взаимодействии пользователя (например, при скролле или изменении размера контейнера).
const limiter = ({ rects }) => {
  const padding = 10;
  return {
    top: rects.reference.top + padding,
    right: rects.reference.right - padding,
    bottom: rects.reference.bottom - padding,
    left: rects.reference.left + padding
  };
};

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

  • Всегда учитывать scroll и overflow контейнеров, чтобы floating не уезжал за пределы видимой области.
  • При сложных интерфейсах комбинировать limiter с flip и shift для динамического и безопасного позиционирования.
  • Для модальных окон и больших поповеров использовать limiter, ориентируясь на window или родительский элемент, чтобы избежать скрытия контента.

Особенности взаимодействия с другими middleware

  • flip — меняет направление всплывающего окна при достижении границы limiter.
  • shift — смещает элемент внутрь разрешённой зоны.
  • size — позволяет автоматически подстраивать размеры всплывающего окна под ограничения.

Использование limiter вместе с другими middleware позволяет добиться точного, безопасного и адаптивного позиционирования, что делает Floating UI эффективным инструментом для реализации современных интерфейсов.

Оглавление