Компонент Tabs

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

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

Типичная структура включает три ключевых элемента:

  1. Контейнер Tabs – основной компонент, который управляет состоянием активной вкладки.
  2. Tab List – набор заголовков вкладок.
  3. Tab Panels – панели с контентом, соответствующие каждой вкладке.

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

<script>
  import { Tabs, TabList, Tab, TabPanel } from 'sveltekit-ui';

  let activeIndex = 0;
</script>

<Tabs bind:activeIndex>
  <TabList>
    <Tab>Вкладка 1</Tab>
    <Tab>Вкладка 2</Tab>
    <Tab>Вкладка 3</Tab>
  </TabList>

  <TabPanel>Контент для Вкладки 1</TabPanel>
  <TabPanel>Контент для Вкладки 2</TabPanel>
  <TabPanel>Контент для Вкладки 3</TabPanel>
</Tabs>

Здесь bind:activeIndex обеспечивает реактивную связь между текущей активной вкладкой и переменной activeIndex.

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

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

  • bind:activeIndex – реактивная привязка текущей вкладки.
  • on:change – событие, вызываемое при переключении вкладок.

Пример обработки события переключения:

<Tabs bind:activeIndex on:change={(e) => console.log('Активная вкладка:', e.detail)}>
  <TabList>
    <Tab>Главная</Tab>
    <Tab>Профиль</Tab>
    <Tab>Настройки</Tab>
  </TabList>

  <TabPanel>Главная информация</TabPanel>
  <TabPanel>Информация профиля</TabPanel>
  <TabPanel>Параметры приложения</TabPanel>
</Tabs>

Динамическое создание вкладок

Tabs поддерживает динамическое формирование заголовков и панелей через массивы:

<script>
  import { Tabs, TabList, Tab, TabPanel } from 'sveltekit-ui';

  const tabs = [
    { title: 'Дом', content: 'Контент Дом' },
    { title: 'Работа', content: 'Контент Работа' },
    { title: 'Хобби', content: 'Контент Хобби' }
  ];
</script>

<Tabs>
  <TabList>
    {#each tabs as tab}
      <Tab>{tab.title}</Tab>
    {/each}
  </TabList>

  {#each tabs as tab}
    <TabPanel>{tab.content}</TabPanel>
  {/each}
</Tabs>

Это упрощает поддержку вкладок и позволяет динамически добавлять или удалять элементы.

Настройка внешнего вида

SvelteKit UI предоставляет встроенные классы и пропсы для стилизации:

  • variant – выбор стиля вкладок (line, enclosed, pills).
  • size – размер заголовков (sm, md, lg).
  • colorScheme – цветовая схема активной вкладки.

Пример:

<Tabs variant="pills" size="md" colorScheme="blue">
  <TabList>
    <Tab>Обзор</Tab>
    <Tab>Детали</Tab>
    <Tab>Отзывы</Tab>
  </TabList>

  <TabPanel>Обзор продукта</TabPanel>
  <TabPanel>Детальная информация</TabPanel>
  <TabPanel>Отзывы пользователей</TabPanel>
</Tabs>

Ленивая загрузка контента вкладок

Для оптимизации производительности можно использовать ленивую загрузку Lazy Tabs, когда контент рендерится только при активации вкладки:

<Tabs bind:activeIndex lazy>
  <TabList>
    <Tab>Новости</Tab>
    <Tab>Статьи</Tab>
    <Tab>Контакты</Tab>
  </TabList>

  <TabPanel>Новости загружаются по мере открытия</TabPanel>
  <TabPanel>Статьи загружаются по мере открытия</TabPanel>
  <TabPanel>Контакты загружаются по мере открытия</TabPanel>
</Tabs>

Использование lazy помогает снизить нагрузку на рендеринг и уменьшить время первого отображения страницы.

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

SvelteKit UI Tabs автоматически обрабатывает основные атрибуты для WAI-ARIA:

  • role="tablist" для контейнера списка вкладок.
  • role="tab" для каждой вкладки.
  • role="tabpanel" для панели контента.
  • Управление фокусом с клавиатуры (ArrowLeft, ArrowRight, Home, End).

Это обеспечивает корректное взаимодействие с экранными читалками и навигацию с клавиатуры без дополнительной настройки.

Интеграция с маршрутизацией

Компонент Tabs можно связать с маршрутизатором SvelteKit, чтобы изменение вкладки обновляло URL:

<script>
  import { page } from '$app/stores';
  import { Tabs, TabList, Tab, TabPanel } from 'sveltekit-ui';
  import { goto } from '$app/navigation';

  let activeIndex = 0;

  $: goto(`/dashboard/${activeIndex}`);
</script>

<Tabs bind:activeIndex>
  <TabList>
    <Tab>Обзор</Tab>
    <Tab>Аналитика</Tab>
    <Tab>Настройки</Tab>
  </TabList>

  <TabPanel>Сводка данных</TabPanel>
  <TabPanel>Графики и отчеты</TabPanel>
  <TabPanel>Конфигурация</TabPanel>
</Tabs>

Расширение функционала

Компонент Tabs легко комбинируется с другими UI-библиотеками:

  • Использование Icon Tab: добавление иконок к заголовкам через <Tab> с вложенными SVG или компонентами иконок.
  • Вкладки с динамическим контентом из API: через реактивные переменные и await блоки можно загружать данные по мере активации вкладки.
  • Комбинация с анимацией: SvelteKit поддерживает transition:fade для плавного появления панелей.
<TabPanel transition:fade>Контент с анимацией</TabPanel>

Эти возможности делают Tabs универсальным инструментом для построения интерактивного и структурированного интерфейса.

Оглавление