Работа с availableWidth и availableHeight

В библиотеке Floating UI управление положением элементов осуществляется через расчёт доступного пространства вокруг целевого элемента. Ключевыми параметрами в этом процессе являются availableWidth и availableHeight. Эти свойства определяют максимальное пространство по горизонтали и вертикали, которое может быть использовано для отображения всплывающего элемента (floating element) без выхода за границы окна или контейнера.

Что такое availableWidth и availableHeight

  • availableWidth — ширина области, в пределах которой может быть размещён всплывающий элемент, начиная от позиции target элемента до ближайшего края видимой области.
  • availableHeight — высота этой области, рассчитываемая аналогично.

Эти параметры используются для динамического позиционирования и адаптивной подгонки размеров всплывающего окна.

Пример вычисления:

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

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

computePosition(reference, floating, {
  middleware: [autoPlacement()],
}).then(({ x, y, availableWidth, availableHeight }) => {
  Object.assign(floating.style, {
    left: `${x}px`,
    top: `${y}px`,
    maxWidth: `${availableWidth}px`,
    maxHeight: `${availableHeight}px`,
  });
});

В данном примере availableWidth и availableHeight используются для ограничения размеров всплывающего элемента, предотвращая его выход за пределы видимой области.

Особенности расчёта доступного пространства

  1. Влияние flip и shift middleware Middleware flip меняет сторону отображения элемента, если недостаточно места. shift корректирует позицию, чтобы элемент не вылезал за границы. availableWidth и availableHeight при этом пересчитываются с учётом новых координат.

  2. Учёт отступов (padding) Метод computePosition позволяет задавать внутренние отступы через опцию padding, чтобы всплывающий элемент не прилипал к краям окна:

    computePosition(reference, floating, {
  middleware: [
    autoPlacement({ padding: 8 })
  ],
});

    Это уменьшает доступное пространство на указанные отступы, что влияет на availableWidth и availableHeight.

  3. Контейнеры с overflow Если всплывающий элемент находится внутри контейнера с ограниченной областью (overflow: hidden или overflow: auto), доступное пространство рассчитывается относительно этого контейнера, а не всего окна. Это важно для корректной адаптации размеров:

    const container = document.querySelector('.scrollable');
computePosition(reference, floating, {
  strategy: 'absolute',
  platform: {
    getBoundingClientRect: () => container.getBoundingClientRect(),
  },
});

Динамическая подгонка размеров всплывающих элементов

Использование availableWidth и availableHeight позволяет реализовать адаптивное отображение:

  • Подгонка ширины под содержимое с учётом ограничений:

    floating.style.width = Math.min(floating.scrollWidth, availableWidth) + 'px';

  • Подгонка высоты при длинном контенте:

    floating.style.maxHeight = availableHeight + 'px';
floating.style.overflowY = 'auto';

Таким образом всплывающий элемент остаётся полностью видимым даже при ограниченном пространстве.

Комбинирование с другими middleware

availableWidth и availableHeight часто применяются совместно с middleware:

  • size — позволяет автоматически подгонять размеры элемента:

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

computePosition(reference, floating, {
  middleware: [
    size({
      apply({ availableWidth, availableHeight, elements }) {
        Object.assign(elements.floating.style, {
          maxWidth: `${availableWidth}px`,
          maxHeight: `${availableHeight}px`,
        });
      },
    }),
  ],
});

  • flip и shift — обеспечивают корректное расположение, после чего размеры корректируются с помощью availableWidth/availableHeight.

  • autoPlacement — автоматически выбирает оптимальную сторону, а затем предоставляет актуальные размеры.

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

  1. При работе с сложными контейнерами лучше проверять, откуда библиотека берёт границы, чтобы availableWidth и availableHeight соответствовали реальному пространству.

  2. Использовать ограничения через CSS (max-width, max-height) вместе с вычисленными значениями для плавной адаптации.

  3. Обрабатывать изменение окна с помощью слушателя resize для повторного вычисления позиции и размеров:

    window.addEventListener('resize', () => computePosition(reference, floating, { middleware: [autoPlacement()] }));

  4. Не полагаться только на fixed размеры: динамическая подгонка через availableWidth и availableHeight делает интерфейс более отзывчивым.

Итоговые рекомендации по использованию

  • availableWidth и availableHeight — это динамические ограничения размеров, которые необходимо учитывать для корректного отображения всплывающих элементов.
  • Их правильное использование совместно с size, flip, shift и autoPlacement обеспечивает адаптивность, видимость и удобство взаимодействия.
  • Важно учитывать контекст: окна браузера, scrollable контейнеры, padding и ограничения CSS.

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

Оглавление