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

CoreDrawer

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

Выдвижная шторка поверх страницы для контента, который нужен на короткое время: фильтры, быстрые детали записи, меню на мобильных. Пользователь открывает её одним касанием и закрывает свайпом, кликом по фону или Esc, не покидая текущий экран.

Технические детали: построена на vaul-vue с drag-to-close; четыре стороны (side bottom/top/left/right), хват-полоска только у горизонтальных (bottom/top), скругления и границы со стороны экрана, env(safe-area-inset-*) для вырезов. Интеграция со стеком оверлеев (тип drawer — кнопка «назад» закрывает): name — идентификатор в стеке и query ?overlay=, z-index растёт с глубиной стека; пока шторку перекрывает другой слой, vaul не закрывает её сам (Esc обрабатывает верхний оверлей). modelValue двусторонне синхронизируется со стеком (мост идемпотентен, циклов нет), без него — управление через useOverlays. title используется как aria-labelledby (DrawerTitle), при пустоте — sr-only из name; dismissible разрешает закрытие жестом/кликом снаружи/Esc. Высота панели — по контенту; expandable — разворачивание жестом за хват-полоску до полной высоты: bottom-шторка — тянуть вверх, top-шторка — тянуть вниз; клик/тап по полоске переключает. Тело капнуто 30dvh в свернутом виде и calc(100dvh − 9rem) в развернутом — скроллится внутри (overflow-y: auto + pan-y); тайтл вне тела и не скроллится ни в одном состоянии; жест полоски исключает drag-to-close vaul (stopPropagation) — конфликтов направлений нет; prefers-reduced-motion гасит переходы фона.

Кнопка «назад» браузера, Esc, клик по фону, жест и кнопка ✕ закрывают шторку через стек оверлеев. У ленты — две точки фиксации: потяните вверх за полоску (или нажмите на неё Enter'ом), и она развернётся на всю высоту экрана.