ContentSwitcher как альтернатива

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

Основные возможности

  • Управление активным состоянием ContentSwitcher позволяет явно контролировать, какой переключатель активен, через свойство selectedIndex. Это обеспечивает синхронизацию состояния с внешними данными или стором Svelte.

    <ContentSwitcher bind:selectedIndex={activeIndex}>
  <Switch name="tab1">Первый таб</Switch>
  <Switch name="tab2">Второй таб</Switch>
  <Switch name="tab3">Третий таб</Switch>
</ContentSwitcher>

<p>Выбранный индекс: {activeIndex}</p>

  • Динамическое создание переключателей Можно создавать переключатели из массива объектов, что удобно при работе с динамическими данными.

    <script>
  let tabs = [
    { name: 'home', label: 'Главная' },
    { name: 'profile', label: 'Профиль' },
    { name: 'settings', label: 'Настройки' }
  ];
  let selected = 0;
</script>

<ContentSwitcher bind:selectedIndex={selected}>
  {#each tabs as tab}
    <Switch name={tab.name}>{tab.label}</Switch>
  {/each}
</ContentSwitcher>

  • События изменения состояния Компонент генерирует событие on:change, которое возвращает объект с selectedIndex и name активного переключателя. Это позволяет реагировать на изменения состояния в других компонентах.

    <ContentSwitcher on:change={(e) => console.log(e.detail)}>
  <Switch name="tab1">Первый таб</Switch>
  <Switch name="tab2">Второй таб</Switch>
</ContentSwitcher>

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

Carbon Components Svelte поддерживает стандартные CSS-переменные, что позволяет изменять внешний вид переключателей:

  • Цвет активного состояния: --cds-content-switcher-selected-background
  • Цвет текста: --cds-content-switcher-text-color
  • Отступы и размеры: через padding и margin на <Switch>

Пример настройки через стиль в Svelte:

<style>
  :global(.bx--content-switcher) {
    --cds-content-switcher-selected-background: #0f62fe;
    --cds-content-switcher-text-color: #ffffff;
  }
</style>

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

ContentSwitcher удобно использовать совместно с компонентами Carbon, такими как DataTable, Accordion или Tabs, для динамической фильтрации и отображения контента:

<ContentSwitcher bind:selectedIndex={selected}>
  <Switch name="table">Таблица</Switch>
  <Switch name="chart">График</Switch>
</ContentSwitcher>

{#if selected === 0}
  <DataTable {rows} {headers}/>
{:else}
  <Chart type="line" data={chartData}/>
{/if}

Accessibility и keyboard navigation

Компонент полностью поддерживает ARIA-атрибуты и навигацию с клавиатуры:

  • Стрелки влево/вправо переключают активный элемент
  • Enter или пробел активируют выбранный переключатель
  • Активный переключатель помечен атрибутом aria-selected="true"

Это делает ContentSwitcher доступным для пользователей с ограниченными возможностями и соответствует стандартам WAI-ARIA.

Практические советы

  • Для большого числа переключателей лучше использовать динамическое создание через массивы и циклы {#each}.
  • Состояние selectedIndex можно хранить в глобальном Svelte store, чтобы синхронизировать активный таб между различными компонентами.
  • Для анимации переходов между контентом рекомендуется использовать Svelte transitions или motion, чтобы переключение выглядело плавным и современным.

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

Оглавление