Управление раскрытием секций

Основы компонента Accordion

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




  
    
Содержимое первой секции

  
  
    
Содержимое второй секции

Ключевые моменты:

  • Accordion выступает контейнером для всех секций.
  • AccordionItem определяет отдельный блок с заголовком и содержимым.
  • Свойство title задаёт текст заголовка секции.

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

По умолчанию все секции могут быть открыты или закрыты независимо. Для динамического управления состоянием используется привязка к свойству open. Пример:




  
    
Содержимое первой секции

  
  
    
Содержимое второй секции

Выделенные аспекты:

  • bind:open позволяет отслеживать и управлять состоянием открытия секции.
  • Программное управление состоянием делает возможным создание сложных сценариев взаимодействия, таких как одновременное открытие или закрытие нескольких секций.

Ограничение одновременного открытия

Иногда необходимо, чтобы открытой была только одна секция. Для этого применяется обработка события on:toggle и логика закрытия всех остальных секций:




  {#each sections as section}
     toggleSection(section.id)}>
      
Содержимое {section.title}

    
  {/each}

Особенности реализации:

  • Использование массива объектов для хранения состояния каждой секции упрощает управление.
  • Логика в toggleSection гарантирует, что открытой будет только выбранная секция.

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

В Carbon Components Svelte допускается создание вложенных Accordion. Это удобно для сложных структур данных:


  
    
      
        
Содержимое вложенной секции 1

      
      
        
Содержимое вложенной секции 2

Важные моменты:

  • Вложенные аккордеоны поддерживают независимое управление состоянием.
  • Необходимо внимательно управлять событиями, чтобы избежать конфликта on:toggle между уровнями.

Пользовательские стили и классы

Для изменения визуального отображения секций можно использовать стандартные свойства class и style или подключать SCSS из Carbon:


  
    
Содержимое секции
  • Позволяет выделять важные секции визуально.
  • Совместимо с темами Carbon, сохраняя адаптивность и доступность.

Анимация раскрытия

Carbon Components Svelte автоматически обрабатывает плавное раскрытие секций через CSS-переходы. Для дополнительного контроля можно использовать Svelte-транзиции:




  
    
Содержимое с эффектом появления
  • Транзиции могут быть комбинированы с состоянием open.
  • Позволяет создавать более динамичные и визуально привлекательные интерфейсы.

События для расширенной логики

Компоненты AccordionItem поддерживают события:

  • on:toggle — вызывается при открытии или закрытии секции.
  • on:focus / on:blur — управление фокусом для клавиатурной навигации.
  • on:keydown — обработка нажатий клавиш для кастомной логики.

Пример использования события toggle для логирования:

 console.log('Открыта:', e.detail.open)}>
  
Контент секции
  • e.detail.open содержит текущее состояние раскрытия.
  • События позволяют интегрировать аккордеоны в более сложные UI-потоки, включая динамическую загрузку данных.
Оглавление