Sidebar
Адаптивна бічна навігація з desktop collapse та mobile focus trap.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
side | leftright | "left" | З якого боку екрана панель. |
width | string | "17rem" | Ширина розгорнутої панелі, будь-яка CSS-величина. |
collapsedWidth | string | "4.5rem" | Ширина згорнутої панелі, будь-яка CSS-величина. |
ariaLabel | string | "Бічна навігація" | Доступна назва панелі — вона є орієнтиром `navigation` на сторінці. |
sidebarId | string | — | Стабільний id шару в стеку оверлеїв. Задавати не обов'язково: без нього генерується автоматично. |
modelValue | boolean | false | Відкрито на мобільному. На десктопі панель видима завжди. Використовуйте через `v-model`. |
collapsed | boolean | false | Згорнуто до вузької смуги з іконками. Лише десктоп. Використовуйте через `v-model:collapsed`. |
collapsible | boolean | true | Показувати кнопку згортання. Вимкніть, якщо ширина панелі фіксована дизайном. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: boolean] | Мобільну панель відкрито або закрито. |
update:collapsed | [value: boolean] | Desktop-панель згорнуто або розгорнуто. |
close | [] | Мобільну панель закрито. |
Слоти
| Назва | Опис |
|---|---|
header | — |
default | — |
footer | — |
Доступно через ref
| Назва | Тип | Опис |
|---|---|---|
close | () => void | — |
toggleCollapsed | () => void | — |
Коли використовувати
Для постійної навігації dashboard, admin або складного продукту. На desktop панель бере участь у layout і може згортатися; на mobile відкривається поверх контенту.
Коли НЕ використовувати
Не використовуйте для тимчасової форми або деталей сутності — це сценарій
UiDrawer. На простому сайті з трьома посиланнями достатньо звичайного nav.
Доступність
На mobile панель отримує роль dialog, блокує прокрутку фону, утримує фокус і
закривається через Escape. На desktop залишається звичайним aside landmark.
Кнопка collapse оголошує поточний стан через aria-expanded.