Popover
SSR-безпечна немодальна панель біля trigger з фліпом, focus return і outside click.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
placement | AnchoredPlacement | "bottom-start" | Бажана позиція панелі. Якщо не вміщається — перевертається на протилежний бік і притискається до краю вікна. |
panelRole | dialoggroupnone | "dialog" | Роль панелі. `dialog` — коли всередині є керування; `tooltip` чи `menu` — за призначенням вмісту. |
initialFocus | string | — | Селектор елемента, який отримує фокус після відкриття. |
ariaLabel | string | — | Доступна назва панелі. Потрібна, коли всередині немає власного заголовка. |
width | string | — | Ширина панелі, будь-яка CSS-величина. Без неї панель за шириною тригера. |
modelValue | boolean | false | Відкрито. Використовуйте через `v-model`. |
closeOnOutside | boolean | true | Клік поза панеллю закриває її. |
closeOnEscape | boolean | true | Escape закриває панель. Закривається лише ВЕРХНІЙ оверлей у стеку. |
disabled | boolean | — | — |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [value: boolean] | Панель відкрито або закрито. |
close | [] | Панель закрилася. |
open | [] | Панель відкрилася. |
Слоти
| Назва | Опис |
|---|---|
trigger | — |
default | — |
Доступно через ref
| Назва | Тип | Опис |
|---|---|---|
open | (focusFirst?: boolean) => void | — |
close | (restoreFocus?: boolean) => void | — |
toggle | () => void | — |
Коли використовувати
Для компактних фільтрів, налаштувань і довільних немодальних контролів біля
кнопки. Слот trigger отримує triggerAttrs — передайте їх реальному
фокусованому елементу.
Коли НЕ використовувати
Не використовуйте для критичного підтвердження або довгої форми — беріть
UiModal чи UiDrawer. Для набору команд із menu-семантикою є UiMenu.
Доступність
Escape закриває панель і повертає фокус. ArrowDown може відкрити її та
сфокусувати перший контроль. panelRole дозволяє обрати dialog, group
або прибрати роль, а ariaLabel дає стабільну доступну назву.
Teleport вимкнений на сервері й під час першого client render, тому гідратація
має однакове дерево; перенесення в body відбувається після mount.