Урок 21. Оверлеи и навигация
⚡ Кратко
Оверлеи — диалоги, боковые панели, меню — строятся из частей:
триггер, портал, подложка и всплывающий блок. Примитив берёт на себя
фокус-ловушку, Esc, блокировку прокрутки и ARIA, а оформление
и анимации описываются классами по состояниям data-open
и data-closed.
О чём этот урок
Самая сложная в реализации группа компонентов — и самая опасная, если писать её вручную. Разберём анатомию диалога, боковую панель, выпадающее меню и вкладки, посмотрим, как устроены анимации появления и как не сломать доступность.
Демонстрации на странице статические: они показывают внешний вид и раскладку. Поведение (открытие, фокус, клавиатура) обеспечивает примитив в вашем проекте.
Структура урока
Теория
Части оверлея, портал, фокус, анимации состояний.
Справочник
Компоненты и их части, классы анимаций.
Примеры
Диалог, панель, меню, вкладки, подтверждение.
Старый vs Новый
Самописный модал против примитива; Radix против Base UI.
Задания
Собрать диалог и меню действий.
Решения
Готовый код с разбором.
Ошибки
Диалог без заголовка, потерянный фокус, вложенные оверлеи.
Домашнее задание
Оверлеи в проекте курса.
Ресурсы
Документация примитивов и ARIA-паттернов.
Практика
- Соберите диалог подтверждения удаления и пройдите его клавиатурой.
- Добавьте меню действий к строке таблицы.
- Проверьте, что после закрытия фокус вернулся на кнопку-триггер.