Accordion
Розкривні секції з анімацією висоти без JS-вимірювань.
Акордеон для секцій, які мають бути під рукою, але не на виду: розкривні налаштування, FAQ, деревоподібні фільтри. Кілька секцій можуть бути відкриті одночасно — для «лише одна» є вкладки.
Приклад
Крок 2 з 3 — клікайте по кроках або ведіть станом.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
items* | AccordionItem[] | — | Секції акордеона. |
modelValue | string[] | undefined | Відкриті секції. Використовуйте через `v-model`. Без `v-model` компонент керує станом сам, починаючи з `defaultOpen`. |
defaultOpen | string[] | [] | Початково відкриті id — лише в некерованому режимі. |
showToggle | boolean | true | Показувати шеврон праворуч. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [ids: string[]] | Набір відкритих секцій змінився. Використовуйте через `v-model`. |
open | [id: string] | Секцію відкрито. |
close | [id: string] | Секцію закрито. |
Слоти
| Назва | Опис |
|---|---|
label | Власний рендер заголовка секції. |
Коли використовувати
Коли вмісту більше, ніж місця, і він не потрібен одночасно весь.
Керований режим через v-model — коли стан відкритих секцій треба
читати або писати згори (фільтри в URL, синхронізація між панелями).
Коли НЕ використовувати
Для навігаційних розділів — навігація має бути видимою, а не схованою за кліком.
Не вкладайте акордеон в акордеон: замість ієрархії виходить лабіринт.
Доступність
Кожен заголовок — <button> всередині <h3>, з aria-expanded і
aria-controls; панель — role="region" з aria-labelledby. Секція
«розкрита» для скрінрідера залишалась би зрозумілою навіть без
анімації — анімація тут прикраса, не носій сенсу.
Заголовки зв'язані клавіатурною навігацією: ↑/↓ переходить до попередньої/наступної секції, Home/End — до першої/останньої (лише фокус; відкриття — Enter/Space або клік, як у вкладках).
Деталі реалізації
Плавне розкриття — через grid-template-rows: 0fr → 1fr: висота
анімується без JS-вимірювань і без жорсткої max-height. Глобальний
prefers-reduced-motion вимикач зупиняє transition сам.