Компонент AccordionItem представляет собой отдельный элемент внутри Accordion. Связывает заголовок и панель, предоставляет контекст дочерним компонентам и отслеживает состояние раскрытия.
- Основное назначение: элемент аккордеона, объединяющий
AccordionHeader и AccordionPanel. - Ключевые возможности:
- Предоставление контекста
accordionItem дочерним компонентам. - Отслеживание активного состояния через родительский
Accordion. - Атрибут
data-state для стилизации открытого состояния. - Передача состояния
open в слот. - Поддержка динамических классов через функцию.
| Проп | Тип | По умолчанию | Описание |
|---|
value | String | Number | (обязательный) | Уникальное значение элемента. Используется для идентификации активной панели в аккордеоне. |
| Имя слота | Пропсы слота | Описание |
|---|
default | { open: Boolean } | Содержимое элемента. Ожидается использование AccordionHeader и AccordionPanel. Параметр open указывает, раскрыт ли элемент. |
| Ключ | Источник | Описание |
|---|
accordion | Accordion | Контекст родительского аккордеона. Предоставляет методы для проверки активного состояния. |
- Атрибут
data-state: принимает значение "open", когда элемент раскрыт. В закрытом состоянии атрибут отсутствует. Это позволяет стилизовать элемент через CSS-селекторы, например [data-state="open"]. - Динамические классы: если через
$attrs.class передана функция, она вызывается с объектом { open: isActive }.
