Tabs

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

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

В большинстве SvelteKit UI библиотек вкладки строятся вокруг трёх ключевых элементов:

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

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

<Tabs let:activeTab>
  <TabList>
    <Tab>Первый</Tab>
    <Tab>Второй</Tab>
    <Tab>Третий</Tab>
  </TabList>

  <TabPanel>
    <p>Контент первой вкладки</p>
  </TabPanel>
  <TabPanel>
    <p>Контент второй вкладки</p>
  </TabPanel>
  <TabPanel>
    <p>Контент третьей вкладки</p>
  </TabPanel>
</Tabs>

Ключевой момент: компонент Tabs управляет состоянием активной вкладки, передавая его через let:activeTab. Это позволяет синхронизировать интерфейс с другими компонентами.

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

Активная вкладка может задаваться двумя способами:

  1. Автоматически по порядку – первая вкладка активна по умолчанию.
  2. Через bind или пропсы – можно привязать активную вкладку к переменной:
<script>
  import { Tabs, TabList, Tab, TabPanel } from 'sveltekit-ui';
  let active = 1; // активная вторая вкладка
</script>

<Tabs bind:activeTab={active}>
  <TabList>
    <Tab>Первый</Tab>
    <Tab>Второй</Tab>
    <Tab>Третий</Tab>
  </TabList>

  <TabPanel>Первый контент</TabPanel>
  <TabPanel>Второй контент</TabPanel>
  <TabPanel>Третий контент</TabPanel>
</Tabs>

Важно: использование bind:activeTab позволяет управлять вкладками программно и синхронизировать состояние с другими компонентами приложения.

Вертикальные и горизонтальные вкладки

SvelteKit UI библиотеки часто поддерживают ориентацию вкладок:

  • Горизонтальные – стандартная ориентация.
  • Вертикальные – удобны для боковых меню или навигационных панелей.
<Tabs orientation="vertical">
  <TabList>
    <Tab>Пункт 1</Tab>
    <Tab>Пункт 2</Tab>
    <Tab>Пункт 3</Tab>
  </TabList>

  <TabPanel>Контент 1</TabPanel>
  <TabPanel>Контент 2</TabPanel>
  <TabPanel>Контент 3</TabPanel>
</Tabs>

Подсказка: вертикальные вкладки требуют CSS-сетку или Flexbox для корректного отображения панели и контента рядом.

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

Вкладки можно создавать динамически из массива данных. Это особенно полезно для построения интерфейсов с переменным количеством секций.

<script>
  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>

Ключевой момент: структура TabList и TabPanel должна сохранять синхронизацию по индексу массива, иначе вкладки будут работать некорректно.

Стилизация и кастомизация

SvelteKit UI библиотеки предоставляют несколько способов стилизовать вкладки:

  1. Через CSS-переменные – позволяет менять цвета, шрифты, размеры.
  2. Через пропсы – библиотеки часто имеют пропсы variant, size, color.
  3. Через слоты – можно вставлять иконки, бейджи, кастомные элементы.

Пример с кастомизацией:

<Tabs variant="pills" color="primary">
  <TabList>
    <Tab>
      Главная <span class="badge">3</span>
    </Tab>
    <Tab>О нас</Tab>
    <Tab>Контакты</Tab>
  </TabList>

  <TabPanel>Контент Главной</TabPanel>
  <TabPanel>Контент О нас</TabPanel>
  <TabPanel>Контент Контактов</TabPanel>
</Tabs>

Ленивая загрузка (Lazy Loading)

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

<Tabs lazy>
  <TabList>
    <Tab>Данные</Tab>
    <Tab>Отчёты</Tab>
  </TabList>

  <TabPanel>
    <DataComponent />
  </TabPanel>
  <TabPanel>
    <ReportsComponent />
  </TabPanel>
</Tabs>

Особенность: при использовании lazy компонент внутри TabPanel не будет монтироваться до момента активации вкладки, что экономит ресурсы при больших объёмах данных.

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

SvelteKit позволяет синхронизировать вкладки с URL. Для этого активная вкладка может зависеть от query-параметра или хеша:

<script>
  import { page } from '$app/stores';
  import { derived } from 'svelte/store';

  const activeTab = derived(page, $page => {
    return $page.url.searchParams.get('tab') || '0';
  });
</script>

<Tabs bind:activeTab={$activeTab}>
  <TabList>
    <Tab>Домой</Tab>
    <Tab>Профиль</Tab>
    <Tab>Настройки</Tab>
  </TabList>

  <TabPanel>Домашняя страница</TabPanel>
  <TabPanel>Профиль пользователя</TabPanel>
  <TabPanel>Настройки аккаунта</TabPanel>
</Tabs>

Преимущество: при обновлении страницы вкладка остаётся активной, а URL может использоваться для прямых ссылок на конкретные разделы интерфейса.

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

SvelteKit UI библиотеки обычно обеспечивают:

  • role="tablist" для контейнера вкладок.
  • role="tab" для каждой вкладки с aria-selected.
  • role="tabpanel" для контента вкладки с aria-labelledby.

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

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

Оглавление