Collapsible

Компонент Collapsible предназначен для создания интерактивных секций с возможностью скрытия и раскрытия контента. Он широко используется для FAQ, боковых панелей, аккордеонов и любых интерфейсов, где требуется экономия пространства без потери информации. В SvelteKit Collapsible реализуется через декларативную привязку состояния, а также через события, обеспечивая высокую степень кастомизации.

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

Базовая структура Collapsible включает три ключевых элемента:

  1. Контейнер (<Collapsible>): обертка, управляющая состоянием видимости содержимого.
  2. Триггер (<CollapsibleTrigger>): элемент, по которому пользователь кликает для открытия или закрытия секции.
  3. Контент (<CollapsibleContent>): скрываемая часть интерфейса, которая появляется при активации триггера.

Пример базовой разметки:

<Collapsible bind:open>
  <CollapsibleTrigger>
    Показать детали
  </CollapsibleTrigger>
  <CollapsibleContent>
    <p>Здесь содержится дополнительная информация, которая скрыта по умолчанию.</p>
  </CollapsibleContent>
</Collapsible>
  • bind:open позволяет привязать состояние видимости к переменной, что даёт возможность управлять Collapsible программно.
  • <CollapsibleTrigger> автоматически обрабатывает клики и переключает состояние open.
  • <CollapsibleContent> использует анимации для плавного раскрытия и скрытия.

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

Состояние Collapsible хранится в булевом значении open. Его можно привязать к переменной для синхронизации с другими частями приложения:

<script>
  let isOpen = false;
</script>

<Collapsible bind:open={isOpen}>
  <CollapsibleTrigger>Подробнее</CollapsibleTrigger>
  <CollapsibleContent>
    <p>Контент, управляемый через переменную isOpen.</p>
  </CollapsibleContent>
</Collapsible>

<button on:click={() => isOpen = !isOpen}>
  Переключить вручную
</button>

Использование двусторонней привязки позволяет:

  • Открывать/закрывать секцию извне компонента.
  • Реализовывать сложные сценарии, например, открытие одного Collapsible и закрытие другого одновременно.

Кастомизация внешнего вида

SvelteKit UI обеспечивает полную кастомизацию стилей через классы и пропсы. Основные возможности:

  • Стилизация триггера:
<CollapsibleTrigger class="bg-blue-500 text-white px-4 py-2 rounded">
  Развернуть
</CollapsibleTrigger>
  • Анимация контента:
<CollapsibleContent class="overflow-hidden transition-all duration-300">
  <p>Плавное раскрытие с transition-all.</p>
</CollapsibleContent>
  • Иконки состояния:
<CollapsibleTrigger class="flex items-center justify-between">
  Развернуть
  <span>{open ? '▲' : '▼'}</span>
</CollapsibleTrigger>

Здесь состояние open можно использовать для динамического отображения иконок или изменения стиля.

Вложенные и аккордеонные структуры

Collapsible поддерживает вложенность и аккордеонные списки, где открыта может быть только одна секция одновременно. Для реализации аккордеона используется массив состояний или контекст:

<script>
  let activeIndex = null;
  const items = ['Секция 1', 'Секция 2', 'Секция 3'];
</script>

{#each items as item, i}
  <Collapsible bind:open={activeIndex === i} on:click={() => activeIndex = activeIndex === i ? null : i}>
    <CollapsibleTrigger>{item}</CollapsibleTrigger>
    <CollapsibleContent>
      <p>Содержимое {item}</p>
    </CollapsibleContent>
  </Collapsible>
{/each}
  • Использование bind:open с индексом обеспечивает автоматическое закрытие других секций.
  • События клика можно дополнительно обрабатывать для логирования или триггеров сторонних эффектов.

События и реактивность

Collapsible генерирует события, которые можно использовать для расширенного контроля:

  • on:open — срабатывает при раскрытии контента.
  • on:close — срабатывает при скрытии.
  • on:toggle — срабатывает при любом изменении состояния.

Пример обработки событий:

<Collapsible on:open={() => console.log('Открыто')} on:close={() => console.log('Закрыто')}>
  <CollapsibleTrigger>Информация</CollapsibleTrigger>
  <CollapsibleContent>
    <p>Контент с обработкой событий.</p>
  </CollapsibleContent>
</Collapsible>

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

Компонент Collapsible учитывает ARIA-атрибуты:

  • aria-expanded на триггере автоматически меняется при переключении.
  • Контент имеет aria-hidden при скрытии.
  • Поддержка клавиатурной навигации: Enter и Space открывают/закрывают секцию.

Пример доступного триггера:

<CollapsibleTrigger aria-label="Развернуть секцию">
  Развернуть
</CollapsibleTrigger>

Оптимизация производительности

  • Collapsible рендерит контент только при необходимости через {#if open} для экономии ресурсов.
  • Для больших списков рекомендуется использовать ленивую подгрузку или виртуализацию.
  • Анимации должны быть CSS-ориентированными, чтобы снизить нагрузку на JavaScript.
<Collapsible>
  <CollapsibleTrigger>Показать</CollapsibleTrigger>
  {#if open}
    <CollapsibleContent>
      <p>Контент рендерится только при раскрытии.</p>
    </CollapsibleContent>
  {/if}
</Collapsible>

Итоговые возможности

Компонент Collapsible в SvelteKit UI обеспечивает:

  • Полное управление состоянием через bind:open.
  • Кастомизацию стилей и анимаций.
  • Поддержку вложенных и аккордеонных структур.
  • События для расширенной логики.
  • Полную доступность с ARIA и клавиатурной навигацией.
  • Оптимизированный рендеринг и производительность.

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

Оглавление