Компонент Accordion — это контейнер для аккордеона, который управляет состоянием раскрытия панелей. Поддерживает одиночный и множественный режимы выбора, контролируемое и неконтролируемое состояние, а также настраиваемую длительность анимации.
- Основное назначение: организация сворачиваемого контента с возможностью раскрытия одной или нескольких панелей одновременно.
- Ключевые возможности:
- Два режима: одиночный (
multiple: false) и множественный (multiple: true). - Контролируемый (
modelValue) и неконтролируемый (defaultValue) режимы. - Настройка длительности анимации.
- Циклическая навигация с клавиатуры (
loop). - Семантическая структура с
data-accordion атрибутом. - Проброс всех атрибутов.
| Проп | Тип | По умолчанию | Описание |
|---|
id | String | | Уникальный идентификатор аккордеона. Если не указан, генерируется автоматически. |
multiple | Boolean | false | Если true, можно раскрыть несколько панелей одновременно. Если false, при раскрытии новой панели предыдущая закрывается. |
modelValue | String | Number | Array | | Контролируемое значение активных панелей. При multiple: true ожидается массив значений, иначе — одиночное значение. |
defaultValue | String | Number | Array | | Значение активных панелей по умолчанию в неконтролируемом режиме. |
transitionDuration | Number | 200 | Длительность анимации раскрытия и скрытия панелей в миллисекундах. |
loop | Boolean | false | Зацикливает навигацию с клавиатуры между элементами аккордеона. |
| Событие | Описание |
|---|
update:modelValue | Вызывается при изменении активных панелей. Параметр: новое значение (одиночное или массив в зависимости от multiple). |
