Accordion

Складывающийся компонент для организации информации в раскрывающиеся панели. Идеально подходит для FAQ, категорий или секций.

Установка

npx @zizigy/capsule add Accordion

Использование

Базовый Accordion

<capsule-accordion>
  <capsule-accordion-panel>
    <capsule-accordion-trigger> Это доступно? </capsule-accordion-trigger>
    <capsule-accordion-content>
      Да. Соответствует паттерну дизайна WAI-ARIA.
    </capsule-accordion-content>
  </capsule-accordion-panel>
</capsule-accordion>

Тип: Single (по умолчанию)

<capsule-accordion type="single">
  <capsule-accordion-panel open> ... </capsule-accordion-panel>
</capsule-accordion>

Тип: Multiple

<capsule-accordion type="multiple">
  <capsule-accordion-panel>...</capsule-accordion-panel>
  <capsule-accordion-panel>...</capsule-accordion-panel>
</capsule-accordion>

Collapsible

Когда установлен атрибут collapsible, можно закрыть все панели, включая первую.

<capsule-accordion collapsible>
  <capsule-accordion-panel open>...</capsule-accordion-panel>
</capsule-accordion>

Кастомный контент триггера

Триггер может содержать любой контент, включая кнопки, иконки и другие интерактивные элементы.

<capsule-accordion>
  <capsule-accordion-panel>
    <capsule-accordion-trigger exclude-self>
      <capsule-button size="sm">
        <svg>...</svg>
        <span>Настройки</span>
      </capsule-button>
    </capsule-accordion-trigger>
    <capsule-accordion-content> ... </capsule-accordion-content>
  </capsule-accordion-panel>
</capsule-accordion>

Компоненты

Компонент Accordion состоит из нескольких подкомпонентов:

capsule-accordion

Главный контейнер для панелей accordion.

capsule-accordion-panel

Отдельная панель accordion. Может иметь атрибут open для установки начального состояния.

<capsule-accordion-panel open> ... </capsule-accordion-panel>

capsule-accordion-trigger

Кликабельный заголовок, который переключает панель.

Атрибут	Тип	По умолчанию	Описание
exclude-self	boolean	false	Отключает переключение при клике на сам элемент триггера

Когда установлен exclude-self, триггер срабатывает только при клике на его дочерние элементы (например, кнопки, иконки), а не на пустое место. Это полезно, когда у вас есть интерактивные элементы внутри триггера.

<capsule-accordion-trigger exclude-self>
  <capsule-button>Редактировать</capsule-button>
</capsule-accordion-trigger>

capsule-accordion-content

Область содержимого, которая складывается.

<capsule-accordion-content> Содержимое панели здесь </capsule-accordion-content>

Атрибуты

Атрибут	Тип	По умолчанию	Описание
type	string	single	Поведение accordion (single или multiple)
collapsible	boolean	false	Позволить закрытие всех панелей, включая первую

Значения type

• single — Только одна панель может быть открыта одновременно (по умолчанию)
• multiple — Несколько панелей могут быть открыты одновременно

Доступность

• ✅ ARIA роли (role="region", role="button")
• ✅ Поддержка навигации с клавиатуры
• ✅ Правильное управление фокусом
• ✅ Семантическая структура для screen readers