Accordion и Accordion Item

Accordion — это компонент интерфейса, позволяющий группировать содержимое в сворачиваемые секции. Он особенно полезен для экономии места на странице и организации больших объёмов информации. В Carbon Components Svelte реализация аккордеона обеспечивается через компонент и вложенные в него .

Структура компонента

Accordion является контейнером для набора элементов:


  
    Содержимое первой секции.
  
  
    Содержимое второй секции.
  • title — обязательное свойство, задающее заголовок секции.
  • Содержимое между тегами отображается только при открытой секции.
  • Можно использовать любой HTML или Svelte-компоненты внутри секции.

Основные свойства

Accordion

Свойство Тип Описание
align 'start' | 'end' Определяет выравнивание стрелки раскрытия относительно заголовка.
multi boolean Позволяет открывать несколько секций одновременно. По умолчанию false (только одна секция открыта).
on:change Event Событие, вызываемое при изменении состояния секций.

AccordionItem

Свойство Тип Описание
title string Заголовок секции.
open boolean Устанавливает начальное состояние секции (открыта/закрыта).
disabled boolean Если true, секция неактивна и не может быть открыта.

Управление состоянием

Состояние аккордеона можно контролировать программно через привязку:




  
    Контент первой секции.
  • bind:open обеспечивает реактивное связывание состояния открытости.
  • Любое изменение переменной isOpen немедленно отразится на интерфейсе.

Множественное раскрытие секций

Для одновременного открытия нескольких элементов используется свойство multi:


  Контент 1
  Контент 2
  Контент 3
  • При multi=false открытие новой секции автоматически закрывает остальные.
  • При multi=true открытие одной секции не влияет на остальные.

События

on:change

Вызывается при изменении состояния открытых секций.

 console.log(e.detail)}>
  Контент
  • e.detail содержит массив индексов открытых секций (для multi=true) или индекс одной открытой секции (multi=false).

Доступность (Accessibility)

Carbon Components Svelte автоматически реализует ARIA-атрибуты:

  • aria-expanded на заголовке секции отражает её состояние.
  • role="button" применяется к интерактивному заголовку.
  • tabindex="0" позволяет навигацию с клавиатуры.
  • Поддерживаются стрелочные клавиши для навигации между заголовками.

Стилизация

Стили задаются через классы Carbon или пользовательские CSS:


  
    Контент
  • Классы Carbon обеспечивают консистентный вид с другими компонентами библиотеки.
  • Пользовательские классы позволяют тонкую настройку внешнего вида.

Вложенные аккордеоны

Возможно создание аккордеонов внутри секций:


  
    
      Контент
      Контент
  • Вложенные аккордеоны полностью независимы.
  • События on:change каждого уровня не пересекаются.

Практические рекомендации

  • Использовать multi=false для FAQ и списков, где логично открывать только одну секцию.
  • Применять multi=true для фильтров и сложных форм, где важно держать несколько секций раскрытыми.
  • Привязка open позволяет сохранять состояние при переходе между страницами или при обновлении данных.
  • Всегда указывать title для каждой секции, чтобы сохранить доступность и читаемость интерфейса.
Оглавление