Tabs

Вкладки з клавіатурною навігацією, слотами панелей і опційною синхронізацією з URL.

Дві форми: underline для розділення вмісту на сторінці та pills для перемикача вигляду. Успадковану реалізацію переписано на токени: іконки там були рядками-класами Font Awesome, тут — слоти tab-<id>.

Приклад

Загальні показники об'єкта.

Щільний список.

Остання зміна: —

Синхронізація з URL

Передайте queryParam="tab" — активна вкладка читається з ?tab= і пишеться туди через router.replace. Для вкладки за замовчуванням параметр НЕ пишеться: URL залишається чистим. Кнопки «Назад/Вперед» перемикають вкладки, як сторінки.

API

Props

Назва	Тип	Типово	Опис
`tabs`*	`TabItem[]`	—	Панелі вкладок.
`modelValue`	`string`	`undefined`	Активна вкладка. Використовуйте через `v-model`.
`variant`	underlinepills	`"underline"`	Вигляд. `underline` — класичні вкладки з лінією, `pills` — сегментний перемикач (фонова підкладка, активна сегмента «піднята»).
`queryParam`	`string`	`undefined`	Назва query-параметра, з яким синхронізується активна вкладка. Напр. `"tab"` — стан читається з `?tab=` і пишеться туди через `router.replace`. Потрібен лише для вкладок, що мають переживати перезавантаження сторінки.
`ariaLabel`	`string`	`"Вкладки"`	Доступна назва для `role="tablist"`.

Події

Назва	Payload	Опис
`update:modelValue`	`[value: string]`	Новий активний id. Використовуйте через `v-model`.
`change`	`[id: string]`	Активна вкладка змінилася — клік, клавіатура або навігація за URL.

Слоти

Назва	Опис
`default`	Вміст активної панелі, якщо не задано слот `panel-<id>`.

Коли використовувати

Коли вміст не вміщується без втрати контексту: налаштування об'єкта, вкладки «Огляд / Журнал», перемикач щільності списку.

Коли НЕ використовувати

Якщо панелі — кроки однієї форми, потрібен Stepper, а не вкладки: вкладки нічого не говорять про порядок і прогрес.

Не ховайте за вкладками те, що користувач має порівнювати одночасно.

Доступність

role="tablist" → role="tab" → role="tabpanel" з aria-selected, aria-controls і aria-labelledby. Roving tabindex: в обході Tab — лише активна вкладка, стрілки перемикають і одразу активують панель; деактивовані вкладки пропускаються, а не зупиняють обхід.

Слот tab-<id> налаштовує вміст кнопки — наприклад, додає іконку або лічильник. Саму кнопку, id, ролі та keyboard handlers завжди рендерить UiTabs. Якщо старий слот повертав власний <button>, залиште тільки його внутрішню розмітку.