Компонент AccordionPanel — это сворачиваемая панель внутри элемента аккордеона. Использует Collapse для анимированного раскрытия и скрытия контента. Автоматически синхронизируется с состоянием родительского аккордеона.
- Основное назначение: контейнер для содержимого, которое показывается и скрывается с плавной анимацией.
- Ключевые возможности:
- Автоматическая синхронизация с родительскими
Accordion и AccordionItem. - Анимация раскрытия на основе
Collapse. - Наследование длительности анимации от
Accordion. - Доступность: ARIA-атрибуты
role="panel", id, aria-labelledby. - Передача текущего состояния
open в слот. - Поддержка динамических классов через функцию.
| Проп | Тип | По умолчанию | Описание |
|---|
collapseProps | Object | | Дополнительные пропсы, передаваемые внутреннему компоненту Collapse. |
| Имя слота | Пропсы слота | Описание |
|---|
default | { open: Boolean } | Содержимое панели. Параметр open указывает, раскрыта ли панель в данный момент. |
| Ключ | Источник | Описание |
|---|
accordion | Accordion | Контекст аккордеона. Предоставляет методы и данные для управления состоянием. |
accordionItem | AccordionItem | Контекст элемента аккордеона. Содержит value текущего элемента. |
- Состояние: панель получает состояние
isActive от родительского аккордеона и передаёт его в Collapse через проп opened. - Идентификаторы:
panelId и buttonId генерируются на основе id аккордеона и value элемента, обеспечивая уникальность и связь с заголовком через aria-labelledby. - Динамические классы: если через
$attrs.class передана функция, она вызывается с объектом { open: isActive }, позволяя менять классы в зависимости от состояния.
