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

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

Основы аккордеонов

Компонент <Accordion> используется для группировки элементов <AccordionItem>. Каждый элемент представляет собой раскрывающуюся панель с заголовком и содержимым. Структура базового аккордеона выглядит следующим образом:

<script>
  import { Accordion, AccordionItem } from 'carbon-components-svelte';
</script>

<Accordion>
  <AccordionItem title="Панель 1">
    Контент панели 1
  </AccordionItem>
  <AccordionItem title="Панель 2">
    Контент панели 2
  </AccordionItem>
</Accordion>

Создание вложенного аккордеона

Вложенный аккордеон создается путем размещения компонента <Accordion> внутри <AccordionItem>. При этом важно учитывать управление состоянием раскрытия, чтобы пользовательский интерфейс оставался предсказуемым.

Пример структуры вложенного аккордеона:

<Accordion>
  <AccordionItem title="Основной раздел">
    Основной контент
    <Accordion>
      <AccordionItem title="Подраздел 1">
        Контент подуровня 1
      </AccordionItem>
      <AccordionItem title="Подраздел 2">
        Контент подуровня 2
      </AccordionItem>
    </Accordion>
  </AccordionItem>
  <AccordionItem title="Другой раздел">
    Контент другого раздела
  </AccordionItem>
</Accordion>

В этом примере внутренний <Accordion> полностью функционирует независимо от внешнего, что позволяет создавать множественные уровни вложенности.

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

Carbon Components Svelte позволяет использовать контролируемые аккордеоны через свойства open и события on:toggle. Это особенно полезно для вложенных структур, когда необходимо программно управлять раскрытием панелей.

<script>
  import { Accordion, AccordionItem } from 'carbon-components-svelte';
  let openMain = false;
  let openSub = false;

  function toggleMain() {
    openMain = !openMain;
  }

  function toggleSub() {
    openSub = !openSub;
  }
</script>

<Accordion>
  <AccordionItem title="Основной раздел" bind:open={openMain} on:toggle={toggleMain}>
    Основной контент
    <Accordion>
      <AccordionItem title="Подраздел 1" bind:open={openSub} on:toggle={toggleSub}>
        Контент подуровня 1
      </AccordionItem>
    </Accordion>
  </AccordionItem>
</Accordion>

Использование bind:open позволяет синхронизировать состояние между внешними и внутренними аккордеонами. Это упрощает реализацию сценариев, когда открытие одного уровня автоматически закрывает другой.

Стилизация вложенных аккордеонов

Для визуальной ясности рекомендуется добавлять отступы и разделители для вложенных элементов. Carbon Components Svelte предоставляет классы для кастомизации, такие как bx--accordion__item и bx--accordion__content. Пример стилизации:

<style>
  .nested-accordion .bx--accordion__item {
    margin-left: 20px;
    border-left: 2px solid #e0e0e0;
    padding-left: 16px;
  }
</style>

<Accordion class="nested-accordion">
  <AccordionItem title="Основной раздел">
    Контент основного раздела
    <Accordion>
      <AccordionItem title="Подраздел 1">
        Контент подуровня 1
      </AccordionItem>
    </Accordion>
  </AccordionItem>
</Accordion>

Использование классов позволяет четко визуально отделять вложенные панели от верхнего уровня, сохраняя читаемость интерфейса.

Рекомендации по проектированию вложенных аккордеонов

  • Не более двух уровней вложенности для сохранения удобочитаемости.
  • Контролируемое раскрытие предпочтительно для сложных структур.
  • Стилизация и отступы помогают визуально обозначить иерархию.
  • Анимация раскрытия может быть отключена или адаптирована для улучшения UX при глубокой вложенности.

Примеры практического применения

  1. Документация и справочные системы: вложенные аккордеоны позволяют структурировать разделы и подразделы.
  2. Настройки приложения: группы настроек с подгруппами для детальной конфигурации.
  3. Часто задаваемые вопросы (FAQ): разделение вопросов на категории с подкатегориями.

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

Оглавление