Drawer
Бічна панель, що виїжджає з будь-якого краю, зі свайпом для закриття знизу.
Drawer ділить overlay-ядро з UiModal, але має протилежний типовий
closeOnBackdrop. Це не непослідовність, а різне призначення: модалка
зазвичай інформаційна, drawer майже завжди містить форму. Випадковий клік
повз панель не має знищувати заповнене.
Приклад
Позиції
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
title | string | "" | Заголовок. Ігнорується, якщо задано слот `header`. |
position | rightlefttopbottom | "right" | З якого краю виїжджає панель. |
size | lgxssmmdxl2xlfullauto | "lg" | Розмір поперек напрямку: ширина для left/right, висота для top/bottom. |
panelClass | string | "" | Додаткові класи панелі. Якщо задано, замінює стандартний фон. |
initialFocus | string | — | CSS-селектор усередині панелі, якому віддати фокус при відкритті. Типово фокус отримує сама панель — щоб на мобільних не піднімалася клавіатура. |
modelValue | boolean | false | Відкрито. Використовуйте через `v-model`. |
closable | boolean | true | Показувати хрестик і дозволяти закриття через Escape. |
noPadding | boolean | false | Прибрати внутрішні відступи вмісту. |
closeOnBackdrop | boolean | false | Клік по затемненому фону закриває drawer. Типово ВИМКНЕНО — на відміну від UiModal. Drawer майже завжди містить форму, і випадковий клік повз панель не має знищувати незбережене введення. |
persistent | boolean | false | Ні Escape, ні клік по фону не закривають — лише явна дія. |
swipeToClose | boolean | true | Свайп вниз закриває нижній drawer. Вимикається, якщо заважає. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: boolean] | Зміна стану відкриття. Використовуйте через `v-model`. |
close | [] | Панель закрито — хрестиком, Escape, кліком по фону або свайпом. |
Слоти
| Назва | Опис |
|---|---|
default | Вміст панелі. |
header | Замінює заголовок цілком. Тоді `title` не використовується. |
footer | Кнопки дій. Футер не рендериться, якщо слот порожній. |
Коли використовувати
Для форм і панелей деталей, де користувач має бачити контекст під панеллю або де вмісту забагато для модалки.
Нижня позиція (position="bottom") — природний вибір для мобільних дій:
панель ближче до великого пальця, ніж будь-що вгорі екрана.
Коли НЕ використовувати
Не робіть drawer заміною сторінки. Якщо на вміст треба дати посилання, повернутися до нього кнопкою «назад» або відкрити в новій вкладці — це сторінка, а не панель.
Доступність
Свайп працює лише знизу і лише коли closable. Ручка та шапка мають
touch-none — без нього браузер забирає вертикальний жест собі як
прокрутку сторінки, і панель не рухається.
Закриття за свайпом спрацьовує або за пройденою чвертю висоти, або за різким флінгом: короткий швидкий рух — теж однозначний намір закрити.
Портування
Ті самі чотири композабли, що й для UiModal. Якщо в проєкті вже є
UiModal, копіювати їх удруге не потрібно.