Учебник Floating UI

Введение
- Что такое Floating UI
- История развития библиотеки
- Отличия от Popper.js
- Когда использовать Floating UI
- Структура документации
Установка и настройка
- Установка через npm
- Установка через CDN
- Совместимость с браузерами
Основные концепции
- Плавающие элементы и их назначение
- Референсный элемент
- Координатная система
- Стратегии позиционирования
- Понятие middleware
- Lifecycle и обновления позиции
Базовое позиционирование
- Функция computePosition
- Параметры размещения (placement)
- Стратегии absolute и fixed
- Работа с координатами x и y
- Простейший пример всплывающей подсказки
- Ручное управление позицией
Middleware: основы
- Что такое middleware и зачем они нужны
- Порядок выполнения middleware
- Структура объекта middleware
- Создание собственного middleware
- Цепочка обработки данных
Offset
- Назначение и применение
- Числовые значения смещения
- Функциональные значения
- Смещение по осям
- Адаптивное смещение
Flip
- Автоматическая смена стороны размещения
- Параметр fallbackPlacements
- Управление поведением переворота
- Boundary и rootBoundary
- Padding и отступы от границ
- Комбинирование с другими middleware
Shift
- Сдвиг вдоль оси размещения
- Параметры limiter
- Boundary constraints
- Padding для shift
- Работа с overflow
Arrow
- Позиционирование стрелки
- Получение координат стрелки
- Padding для стрелки
- Стилизация и отображение
- Учет размеров стрелки
AutoPlacement
- Автоматический выбор оптимальной позиции
- Отличия от flip
- Параметр alignment
- Allowed placements
- Приоритеты размещения
Size
- Изменение размеров floating элемента
- Подгонка под доступное пространство
- Apply функция
- Работа с availableWidth и availableHeight
- Ограничения минимальных и максимальных размеров
Hide
- Скрытие при выходе за границы
- Стратегии referenceHidden и escaped
- Определение видимости элемента
- Интеграция с CSS
Inline
- Позиционирование относительно inline элементов
- Работа с текстовыми выделениями
- Получение ClientRect для inline контента
- Специфика размещения
DOM платформа
- Понятие платформы в Floating UI
- Методы platform объекта
- getElementRects
- getClippingRect
- getDimensions
- Переопределение методов платформы
Виртуальные элементы
- Что такое виртуальный референс
- Структура объекта getBoundingClientRect
- Использование с координатами мыши
- Кастомная логика позиционирования
- Динамические виртуальные элементы
Автообновление позиции
- autoUpdate utility
- Отслеживание изменений DOM
- Наблюдение за scroll и resize
- Управление подписками
- Производительность и оптимизация
- Очистка ресурсов
Взаимодействия и события
- Открытие и закрытие floating элемента
- Обработка кликов вне элемента
- Управление фокусом
- Keyboard navigation
- Dismiss паттерны
Accessibility
- ARIA атрибуты для floating элементов
- Роли и метки
- Управление с клавиатуры
- Фокус и tab order
- Screen reader поддержка
Floating UI React
- Установка пакета
- Хуки useFloating
- FloatingPortal компонент
- FloatingFocusManager
- FloatingOverlay
- FloatingArrow
- Интеграция с React состоянием
React interactions
- useHover хук
- useClick хук
- useFocus хук
- useDismiss хук
- useRole хук
- useInteractions композиция
- Комбинирование взаимодействий
React компоненты высокого уровня
- Tooltip компонент
- Popover компонент
- Dropdown компонент
- Select компонент
- Dialog позиционирование
- Context menu
Floating UI Vue
- Установка для Vue 3
- Композаблы
- useFloating в Vue
- Реактивность и refs
- Template integration
- Teleport и порталы
Анимации и transitions
- CSS transitions для floating элементов
- Управление видимостью
- Анимация появления и исчезновения
- Координация с позиционированием
- Frame-perfect рендеринг
- Web Animations API
Продвинутое позиционирование
- Множественные floating элементы
- Вложенные меню и подменю
- Floating элементы внутри floating элементов
- Tree структуры
- Сложные layouts
Производительность
- Оптимизация вычислений
- Debouncing и throttling
- Ленивая инициализация
- Переиспользование middleware
- Профилирование и метрики
Адаптивность и responsiveness
- Поведение на мобильных устройствах
- Touch events
- Viewport constraints
- Ориентация экрана
- Adaptive positioning strategies
Стилизация
- CSS подходы к оформлению
- Динамические стили из middleware
- CSS переменные
- Темизация
- Z-index управление
- Backdrop и overlay
Тестирование
- Unit тесты для позиционирования
- Моки и стабы для DOM
- Тестирование middleware
- Integration тесты
- Visual regression тесты
Миграция с Popper.js
- Основные различия в API
- Mapping конфигурации
- Переход с modifiers на middleware
- Изменения в названиях
- Обратная совместимость
Интеграция с фреймворками
- Svelte интеграция
- Angular использование
- Web Components
- Micro-frontends
Отладка
- Инструменты разработчика
- Визуализация boundaries
- Логирование middleware
- Типичные проблемы и решения
- Debug режим
Рецепты и паттерны
- Комбинации middleware для типичных задач
- Адаптивные тултипы
- Контекстные меню с подменю
- Autocomplete и combobox
- Sticky позиционирование
- Follow cursor эффект
TypeScript
- Типизация в Floating UI
- Generic типы
- Расширение типов middleware
- Type-safe конфигурация
- Кастомные платформы с типами
Справочник API
- Полный список функций
- Параметры и возвращаемые значения
- Константы и enum
- Типы данных
- Deprecated функциональность