Ограничения минимальных и максимальных размеров

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

Настройка минимальной и максимальной ширины и высоты

В Floating UI размеры управляются через опцию size в модуле autoUpdate или через middleware size. Она позволяет задать диапазон, в котором элемент может изменять свои размеры.

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

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

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

computePosition(reference, floating, {
  middleware: [
    offset(8),
    size({
      apply({ rects, availableWidth, availableHeight, elements }) {
        Object.assign(elements.floating.style, {
          maxWidth: `${Math.min(300, availableWidth)}px`,
          minWidth: '100px',
          maxHeight: `${Math.min(400, availableHeight)}px`,
          minHeight: '50px',
        });
      }
    })
  ]
});

В этом примере:

  • maxWidth ограничивает элемент максимальной шириной 300px или доступной шириной контейнера.
  • minWidth гарантирует, что элемент не будет меньше 100px.
  • maxHeight и minHeight работают аналогично, обеспечивая контроль по вертикали.

Особенности работы с availableWidth и availableHeight

availableWidth и availableHeight — это ключевые параметры, предоставляемые middleware size. Они отражают пространство, доступное для всплывающего элемента, с учетом границ окна и родительских элементов.

Важно: даже если установлены фиксированные min и max размеры, Floating UI корректирует их в зависимости от реального доступного пространства, чтобы элемент не выходил за пределы видимой области.

apply({ availableWidth, availableHeight, elements }) {
  elements.floating.style.width = `${Math.max(150, Math.min(availableWidth, 300))}px`;
  elements.floating.style.height = `${Math.max(100, Math.min(availableHeight, 400))}px`;
}

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

Динамическая адаптация размеров

Floating UI позволяет адаптировать размеры при изменении содержимого или размера окна в реальном времени с помощью функции autoUpdate. Middleware size автоматически пересчитывает доступное пространство, что обеспечивает корректное позиционирование даже при изменении текста, изображений или при ресайзе окна.

import { autoUpdate } from '@floating-ui/dom';

autoUpdate(reference, floating, () => {
  computePosition(reference, floating, {
    middleware: [offset(10), size({ ... })]
  });
});

При каждом обновлении размеры будут пересчитываться, сохраняя ограничения min и max.

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

Ограничения размеров тесно связаны с другими middleware Floating UI:

  • offset — гарантирует, что элемент не будет слишком близко к reference.
  • flip — при нехватке места меняет сторону отображения. Размеры влияют на вычисления flip, так как элемент не может выйти за пределы окна.
  • shift — корректирует позицию, чтобы элемент оставался видимым. Ограничения высоты и ширины помогают shift работать корректнее, предотвращая пересечение краев экрана.

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

computePosition(reference, floating, {
  middleware: [
    offset(8),
    flip(),
    shift({ padding: 5 }),
    size({
      apply({ availableWidth, availableHeight, elements }) {
        elements.floating.style.width = `${Math.min(250, availableWidth)}px`;
        elements.floating.style.height = `${Math.min(300, availableHeight)}px`;
      }
    })
  ]
});

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

  1. Всегда указывать min и max: это предотвращает слишком маленькие или слишком большие всплывающие элементы при динамическом содержимом.
  2. Использовать доступное пространство (availableWidth/Height): позволяет адаптировать элемент под любые размеры экрана.
  3. Комбинировать с flip и shift: ограничения размеров обеспечивают корректное поведение вместе с другими middleware.
  4. Следить за динамическим контентом: при изменении содержимого применять autoUpdate для пересчета размеров.

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

Оглавление