Tabs и Tab для вкладок

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

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

Компонент Tabs является контейнером для нескольких компонентов Tab. Основные свойства Tabs:

selected – индекс активной вкладки (по умолчанию 0).
scrollable – логическое значение, позволяющее включить горизонтальную прокрутку вкладок.
light – применение светлой темы оформления.
on:change – событие, вызываемое при переключении вкладки, возвращает объект с индексом новой активной вкладки.

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

<script>
  import { Tabs, Tab } from 'carbon-components-svelte';
  let activeTab = 0;
</script>

<Tabs bind:selected={activeTab}>
  <Tab label="Вкладка 1">
    <p>Контент первой вкладки.</p>
  </Tab>
  <Tab label="Вкладка 2">
    <p>Контент второй вкладки.</p>
  </Tab>
  <Tab label="Вкладка 3">
    <p>Контент третьей вкладки.</p>
  </Tab>
</Tabs>

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

Свойства компонента `Tab`

Компонент Tab поддерживает следующие ключевые свойства:

label – текст на вкладке.
disabled – логическое значение, блокирующее вкладку.
title – текст подсказки при наведении.
id – уникальный идентификатор для вкладки, полезен для управления фокусом или интеграции с тестами.

Пример использования свойства disabled:

<Tabs selected={1}>
  <Tab label="Вкладка 1">
    <p>Контент первой вкладки</p>
  </Tab>
  <Tab label="Вкладка 2" disabled>
    <p>Эта вкладка недоступна</p>
  </Tab>
  <Tab label="Вкладка 3">
    <p>Контент третьей вкладки</p>
  </Tab>
</Tabs>

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

Компонент Tabs генерирует событие change при переключении вкладки. Событие содержит объект с ключом selected, указывающим индекс выбранной вкладки.

<Tabs on:change={(e) => console.log('Активная вкладка:', e.detail.selected)}>
  <Tab label="Вкладка 1">
    <p>Контент первой вкладки.</p>
  </Tab>
  <Tab label="Вкладка 2">
    <p>Контент второй вкладки.</p>
  </Tab>
</Tabs>

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

Горизонтальная прокрутка вкладок

При большом количестве вкладок можно использовать свойство scrollable, которое добавляет горизонтальную прокрутку и стрелки навигации.

<Tabs scrollable>
  {#each Array(10) as _, i}
    <Tab label={`Вкладка ${i + 1}`}>
      <p>Контент вкладки {i + 1}</p>
    </Tab>
  {/each}
</Tabs>

При использовании scrollable Carbon автоматически добавляет визуальные стрелки и прокручиваемую область, обеспечивая удобную навигацию по вкладкам.

Интеграция с динамическим контентом

Компоненты Tabs и Tab легко интегрируются с динамическими массивами данных. Это позволяет формировать вкладки на основе внешних источников данных, API или пользовательского ввода.

<script>
  let sections = [
    { id: 1, name: 'Профиль', content: 'Контент профиля' },
    { id: 2, name: 'Настройки', content: 'Контент настроек' },
    { id: 3, name: 'Сообщения', content: 'Контент сообщений' }
  ];
</script>

<Tabs>
  {#each sections as section}
    <Tab label={section.name}>
      <p>{section.content}</p>
    </Tab>
  {/each}
</Tabs>

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

Работа с темами

С помощью свойства light можно включить светлую тему:

<Tabs light>
  <Tab label="Вкладка A">
    <p>Светлая тема, вкладка A</p>
  </Tab>
  <Tab label="Вкладка B">
    <p>Светлая тема, вкладка B</p>
  </Tab>
</Tabs>

Компонент автоматически применяет соответствующие стили Carbon для светлой и темной тем интерфейса.

Управление фокусом и доступностью

Carbon Components Svelte соблюдает принципы доступности:

Вкладки доступны через клавиши Tab и стрелки.
Атрибуты aria-selected, aria-disabled автоматически выставляются.
Можно программно задавать фокус на вкладку через id и метод focus().

Пример программного управления фокусом:

<script>
  import { onMount } from 'svelte';
  let tabRef;
  onMount(() => {
    tabRef.focus();
  });
</script>

<Tabs>
  <Tab label="Фокусируемая вкладка" bind:this={tabRef}>
    <p>Контент вкладки с фокусом при загрузке</p>
  </Tab>
  <Tab label="Другая вкладка">
    <p>Контент второй вкладки</p>
  </Tab>
</Tabs>