Перейти к содержимому

CorePopover

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

Всплывающая панель рядом с триггером: пояснение, меню или фильтры — пользователь получает нужный контекст, не покидая страницу. Всюду, где модалка избыточна: контекстные меню, фильтры таблиц, подсказки у полей, панели действий над списками.

Панель умная: позиция рассчитывается от вьюпорта — не влезает снизу, разворачивается вверх; у края экрана прижимается с отступом 8px, ничего не обрезается; едет за триггером при скролле и resize (пересчёт через rAF — замер дешевле кадра). Шесть позиций placement, width="trigger" — панель по ширине триггера, maxWidth капает любую ширину. Скролл страницы не блокируется — панель живёт вместе с контентом, что правильно для меню внутри списков.

Триггером становится ваш элемент: aria-expanded/haspopup/controls сливаются прямо на него — обёртка-кнопка появляется только для текстового слота. popup="dialog" даёт панели роль и имя из триггера; для меню роль задаёт контент слота, а ArrowDown/Up открывают панель с клавиатуры (паттерн APG menu-button). Закрытие: клик вне (боковые кнопки мыши — жесты навигации — панель не сворачивают), Esc — только если поповер вершина стека, «назад» в браузере — как у всех оверлеев. trigger="hover" — открытие по наведению с задержкой 150мс (мост через зазор до панели), touch — всегда кликом. flow — фирменный перелив рамки (--popover-flow-a/-b, полная замена — --popover-flow-image); при prefers-reduced-motion градиент статичен.

открыт: false

flow — переливающаяся градиентная рамка панели (цвета — --popover-flow-a/-b, картинка — --popover-flow-image)

flow открыт: false