FLOATING UI / ЛАБОРАТОРИЯ ГЕОМЕТРИИ

Панель, которая находит своё место

Двигайте кнопку, меняйте сторону и смотрите, как настоящая Floating UI пересчитывает положение. Здесь видна разница между «хочу сверху» и «сверху хватает места».

Опыт на минуту: нажмите «Верхний край». Желаемая сторона станет top-start, а flip перенесёт панель вниз. Переключите режим на «Без смены стороны», затем включите autoPlacement и сравните результат.

НАСТРОЙКИ

Как искать место

К сцене ↓

flip сохраняет выбранную сторону, пока она помещается. autoPlacement ищет свободное место заново. Эти два middleware не включают вместе.

10 px
12 px
240 px

На узком экране ширина ограничивается сценой. size дополнительно учитывает доступное пространство.

Помощники позиционирования
Положение кнопки
50%
45%

0–100% доступного пути: кнопка целиком остаётся в сцене. Стрелки клавиатуры меняют значение на один шаг.

Сброс возвращает исходные настройки; в автономном HTML — сохранённый снимок.

ЖИВАЯ СЦЕНА · 420 PX

Проверьте края

К настройкам ↑
Желаемаяbottom-start
Итоговая—
Координаты x / y—

Координаты измеряются в пикселях относительно сцены.

Кнопка привязки тоже открывает и закрывает панель; Escape закрывает её. При отключённой защите панель может обрезаться границей сцены — горизонтальная прокрутка страницы не появляется.

ОТ ЭКСПЕРИМЕНТА К КОДУ

Заберите свой вариант

JavaScript показывает вызовы самой Floating UI; JSON сохраняет настройки лаборатории. Автономный HTML включает сцену, библиотеки и стили и открывается без интернета.

Полный проект · ZIP

HTML автономной страницы

После экспорта здесь появится полный HTML. Если браузер заблокировал скачивание, скопируйте его и сохраните в файл с расширением .html.