Компонент AccordionButton — это кнопка-триггер для раскрытия и скрытия панели аккордеона. Обеспечивает доступность, клавиатурную навигацию и синхронизацию с состоянием родительского аккордеона.
- Основное назначение: кнопка для управления видимостью связанной панели
AccordionPanel. - Ключевые возможности:
- Переключение состояния панели по клику.
- Навигация с клавиатуры между элементами аккордеона (стрелки вверх/вниз, Home/End).
- Поддержка циклической навигации (
loop). - Доступность: ARIA-атрибуты
aria-expanded, aria-controls, id. - Возможность заменить корневой тег через
component. - Передача состояния
open в слот. - Поддержка динамических классов через функцию.
| Проп | Тип | По умолчанию | Описание |
|---|
component | String | Object | 'button' | Позволяет заменить корневой HTML-тег или передать компонент. |
disabled | Boolean | false | Блокирует кнопку, делая её некликабельной. |
| Имя слота | Пропсы слота | Описание |
|---|
default | { open: Boolean } | Содержимое кнопки. Параметр open указывает, раскрыта ли связанная панель. |
| Ключ | Источник | Описание |
|---|
accordion | Accordion | Контекст родительского аккордеона. Предоставляет методы управления и данные о состоянии. |
accordionItem | AccordionItem | Контекст элемента аккордеона. Содержит value текущего элемента. |
| Клавиша | Действие |
|---|
↓ (стрелка вниз) | Переместить фокус на следующую кнопку аккордеона. |
↑ (стрелка вверх) | Переместить фокус на предыдущую кнопку аккордеона. |
Home | Переместить фокус на первую кнопку аккордеона. |
End | Переместить фокус на последнюю кнопку аккордеона. |
Enter или Space | Переключить состояние панели. |
Если в Accordion включён loop, навигация зацикливается: с последнего элемента фокус переходит на первый, и наоборот.
