ContentSwitcher для переключения контента

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

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

Компонент состоит из двух ключевых элементов:

  1. ContentSwitcher — контейнер, который управляет состоянием выбранного элемента.
  2. Switch — отдельный переключатель внутри ContentSwitcher.

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




  Первый вариант
  Второй вариант
  Третий вариант



Выбранный индекс: {selectedIndex}

Пояснение:

  • bind:selectedIndex позволяет синхронизировать состояние выбранного переключателя с переменной в компоненте Svelte.
  • name у каждого Switch используется для идентификации элемента и может быть строкой или числом.
  • Текст внутри отображается на кнопке переключателя.

Свойства ContentSwitcher

  • selectedIndex — индекс активного переключателя (по умолчанию 0).
  • light — булевое значение, задающее светлую тему компонента.
  • on:change — событие, которое срабатывает при изменении выбранного элемента. Передаёт объект с полями index и name.

Пример использования события change:

 console.log(e.detail)}>
  Вкладка 1
  Вкладка 2

Вывод: при переключении между вкладками в консоль выводится объект вида { index: 1, name: 'tab2' }.

Свойства Switch

  • name — уникальное имя переключателя.
  • disabled — если true, переключатель неактивен и не реагирует на клики.
  • text — альтернативный способ задания текста переключателя (необязательный, чаще используют содержимое внутри тега).

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


  Активная
  Неактивная

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

  • change на уровне ContentSwitcher — основное событие для отслеживания выбора. Срабатывает каждый раз, когда пользователь выбирает другой Switch.
  • Прямое управление через selectedIndex позволяет программно изменять активный переключатель.

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




  Первый
  Второй




Текущий индекс: {selectedIndex}

Адаптация внешнего вида

  • Тема: использование свойства light позволяет включить светлую версию компонента, которая хорошо сочетается с тёмными фонами родительских элементов.
  • Размеры: в Carbon Components Svelte нет прямого свойства для масштабирования ContentSwitcher, однако можно использовать CSS-классы для изменения ширины и отступов кнопок.

Пример CSS-адаптации:


  A
  B

Важные особенности

  • Доступность: компонент автоматически поддерживает навигацию с клавиатуры (Tab, стрелки) и корректно работает с экранными читалками.
  • Управление фокусом: при переключении ContentSwitcher фокус перемещается на выбранный элемент, обеспечивая удобство навигации.
  • Анимация: стандартной анимации нет, но можно реализовать плавное изменение контента через CSS-переходы на обёртке контента.

Рекомендации по использованию

  1. Синхронизация состояния: всегда использовать bind:selectedIndex, если требуется реактивное управление переключателем.
  2. Идентификаторы: name у Switch должны быть уникальными для корректной работы событий.
  3. Динамический контент: при генерации переключателей через {#each} убедиться, что индексы и name уникальны, иначе bind:selectedIndex может работать некорректно.
  4. Доступность и UX: избегать слишком большого числа переключателей; оптимально использовать 2–4 элемента для удобного выбора.

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




  {#each tabs as tab, i}
    {tab}
  {/each}



Выбрана вкладка: {tabs[selectedIndex]}

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

Оглавление