Перейти до вмісту
tatetUI

Popover

SSR-безпечна немодальна панель біля trigger з фліпом, focus return і outside click.

Приклад

API

Props

НазваТипТиповоОпис
placementAnchoredPlacement"bottom-start"Бажана позиція панелі. Якщо не вміщається — перевертається на протилежний бік і притискається до краю вікна.
panelRoledialoggroupnone"dialog"Роль панелі. `dialog` — коли всередині є керування; `tooltip` чи `menu` — за призначенням вмісту.
initialFocusstringСелектор елемента, який отримує фокус після відкриття.
ariaLabelstringДоступна назва панелі. Потрібна, коли всередині немає власного заголовка.
widthstringШирина панелі, будь-яка CSS-величина. Без неї панель за шириною тригера.
modelValuebooleanfalseВідкрито. Використовуйте через `v-model`.
closeOnOutsidebooleantrueКлік поза панеллю закриває її.
closeOnEscapebooleantrueEscape закриває панель. Закривається лише ВЕРХНІЙ оверлей у стеку.
disabledboolean

Події

Назва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.