Аккордеоны и tabs

Аккордеоны представляют собой интерфейсный элемент, позволяющий компактно отображать большое количество информации с возможностью разворачивания и сворачивания отдельных блоков. В SvelteKit аккордеоны реализуются с помощью реактивности и компонентов UI-библиотек, таких как @skeletonlabs/skeleton или svelte-headless-ui. Основные принципы работы:

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

<script lang="ts">
  import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@skeletonlabs/skeleton';
</script>

<Accordion>
  <AccordionItem>
    <AccordionHeader>Раздел 1</AccordionHeader>
    <AccordionPanel>
      Содержимое первого раздела.
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>Раздел 2</AccordionHeader>
    <AccordionPanel>
      Содержимое второго раздела.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

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

  • Accordion – контейнер всего аккордеона, управляет логикой открытия/закрытия элементов.
  • AccordionItem – отдельный элемент аккордеона.
  • AccordionHeader – кликабельная область, переключающая видимость панели.
  • AccordionPanel – блок, который отображается или скрывается при клике на заголовок.

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

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

<script lang="ts">
  import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@skeletonlabs/skeleton';
  let activeIndex: number | null = null;
</script>

<Accordion bind:active={activeIndex}>
  <AccordionItem>
    <AccordionHeader>Раздел 1</AccordionHeader>
    <AccordionPanel>
      Содержимое первого раздела.
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem>
    <AccordionHeader>Раздел 2</AccordionHeader>
    <AccordionPanel>
      Содержимое второго раздела.
    </AccordionPanel>
  </AccordionItem>
</Accordion>

<p>Активный раздел: {activeIndex !== null ? activeIndex + 1 : 'нет'}</p>
  • bind:active синхронизирует открытый элемент с переменной activeIndex.
  • Можно реализовать множественное открытие, если библиотека поддерживает multiple={true}.

Настройка анимации и стилей

Аккордеоны могут использовать встроенные анимации Svelte:

<AccordionPanel transition:slide>
  Содержимое с плавной анимацией.
</AccordionPanel>
  • transition:slide — встроенный переход для плавного раскрытия.
  • Стили можно кастомизировать через классы или TailwindCSS, если проект его использует.

Tabs в SvelteKit UI

Табы позволяют организовать интерфейс в виде нескольких панелей, каждая из которых доступна по клику на соответствующую вкладку.

Основная структура табов

<script lang="ts">
  import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@skeletonlabs/skeleton';
</script>

<Tabs>
  <TabList>
    <Tab>Вкладка 1</Tab>
    <Tab>Вкладка 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>
      Контент первой вкладки.
    </TabPanel>
    <TabPanel>
      Контент второй вкладки.
    </TabPanel>
  </TabPanels>
</Tabs>

Объяснение компонентов:

  • Tabs – корневой контейнер, управляет активной вкладкой.
  • TabList – список заголовков вкладок.
  • Tab – отдельная вкладка, кликая по которой меняется активный TabPanel.
  • TabPanels – контейнер для панелей контента.
  • TabPanel – содержимое конкретной вкладки.

Управление активной вкладкой

Можно использовать реактивные переменные для контроля состояния:

<script lang="ts">
  import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@skeletonlabs/skeleton';
  let activeTab = 0;
</script>

<Tabs bind:active={activeTab}>
  <TabList>
    <Tab>Вкладка 1</Tab>
    <Tab>Вкладка 2</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Контент первой вкладки</TabPanel>
    <TabPanel>Контент второй вкладки</TabPanel>
  </TabPanels>
</Tabs>

<p>Текущая вкладка: {activeTab + 1}</p>
  • bind:active позволяет синхронизировать активную вкладку с переменной.
  • Можно реализовать программное переключение вкладок через изменение activeTab.

Кастомизация и стилизация

  • Используются классы CSS, TailwindCSS или стили внутри Svelte-компонентов.
  • Можно добавить анимации появления панелей через transition:fade или transition:slide.
  • Для динамического контента можно применять {#each} для генерации вкладок и панелей из массива данных.

Совместное использование аккордеонов и табов

В интерфейсах сложного уровня часто требуется комбинировать оба компонента:

<Accordion>
  <AccordionItem>
    <AccordionHeader>Раздел с вкладками</AccordionHeader>
    <AccordionPanel>
      <Tabs>
        <TabList>
          <Tab>Таб 1</Tab>
          <Tab>Таб 2</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>Контент таба 1 внутри аккордеона</TabPanel>
          <TabPanel>Контент таба 2 внутри аккордеона</TabPanel>
        </TabPanels>
      </Tabs>
    </AccordionPanel>
  </AccordionItem>
</Accordion>

Особенности:

  • Реактивность SvelteKit обеспечивает корректное управление состоянием и аккордеонов, и табов одновременно.
  • Можно комбинировать анимации для плавного раскрытия аккордеона и смены вкладок.
  • Поддержка динамического контента внутри обоих компонентов позволяет создавать сложные интерфейсы без потери производительности.

Эта архитектура компонентов в SvelteKit UI обеспечивает мощный инструмент для организации информации, создавая интерфейсы, которые остаются компактными, интерактивными и легко расширяемыми.

Оглавление