Toggle и ToggleGroup

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

Компонент Toggle

Toggle — это компонент, который отражает одно двоичное состояние: включено/выключено (true/false). Основные свойства:

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

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

<script>
  import { Toggle } from 'sveltekit-ui';
  let isActive = false;

  function handleToggle(event) {
    isActive = event.detail.checked;
  }
</script>

<Toggle bind:checked={isActive} on:change={handleToggle} />
<p>Состояние: {isActive ? 'Включено' : 'Выключено'}</p>

Особенности Toggle:

  • Поддержка двунаправленного связывания через bind:checked.
  • Полная доступность (aria- атрибуты генерируются автоматически).
  • Возможность кастомизации через CSS-переменные и слот-контент.

Компонент ToggleGroup

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

Основные параметры:

  • type — определяет поведение группы: "single" (один выбранный элемент) или "multiple" (несколько выбранных элементов).
  • value — текущее выбранное значение или массив выбранных значений.
  • disabled — блокирует всю группу.
  • on:change — событие изменения выбранного элемента.

Пример с одиночным выбором:

<script>
  import { ToggleGroup, Toggle } from 'sveltekit-ui';
  let selected = 'apple';

  function handleChange(event) {
    selected = event.detail.value;
  }
</script>

<ToggleGroup type="single" bind:value={selected} on:change={handleChange}>
  <Toggle value="apple">Яблоко</Toggle>
  <Toggle value="banana">Банан</Toggle>
  <Toggle value="cherry">Вишня</Toggle>
</ToggleGroup>

<p>Выбрано: {selected}</p>

Пример с множественным выбором:

<script>
  import { ToggleGroup, Toggle } from 'sveltekit-ui';
  let selectedFruits = ['apple', 'cherry'];

  function handleChange(event) {
    selectedFruits = event.detail.value;
  }
</script>

<ToggleGroup type="multiple" bind:value={selectedFruits} on:change={handleChange}>
  <Toggle value="apple">Яблоко</Toggle>
  <Toggle value="banana">Банан</Toggle>
  <Toggle value="cherry">Вишня</Toggle>
</ToggleGroup>

<p>Выбрано: {selectedFruits.join(', ')}</p>

Особенности ToggleGroup:

  • Синхронизация состояния всех дочерних Toggle.
  • Поддержка как радио-подобного поведения (single), так и чекбоксов (multiple).
  • Интеграция с формами: name и value можно использовать для отправки данных на сервер.

События и реактивность

Toggle и ToggleGroup используют кастомные события с объектом detail, который содержит актуальное состояние:

  • Для Toggle: event.detail.checked
  • Для ToggleGroup: event.detail.value (строка или массив)

Это позволяет создавать реактивные интерфейсы без дополнительного стейта:

<Toggle bind:checked={isActive} />
<ToggleGroup type="multiple" bind:value={selectedItems} />

Реактивные привязки автоматически обновляют компоненты при изменении внешних переменных.

Кастомизация внешнего вида

Стилизация Toggle и ToggleGroup выполняется через:

  1. Слоты — для изменения контента кнопок и меток.
  2. CSS-переменные — для изменения цветов, размеров и эффектов состояния.
  3. Композицию с другими UI-компонентами — можно оборачивать Toggle в Tooltip, Card или FormField.

Пример кастомного стиля:

<Toggle style="--toggle-size: 40px; --toggle-color-on: #4caf50;" />

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

Компоненты SvelteKit UI libs обеспечивают:

  • Автоматическую генерацию aria-checked и role="switch" для Toggle.
  • Поддержку навигации с клавиатуры в ToggleGroup (стрелки для переключения и пробел/Enter для активации).
  • Валидацию для форм при использовании ToggleGroup в качестве радиогруппы или множества чекбоксов.

Лучшие практики использования

  • Использовать Toggle для простых двоичных состояний (вкл/выкл, активен/не активен).
  • Применять ToggleGroup type=“single” для выбора одной опции из нескольких.
  • Применять ToggleGroup type=“multiple” для выбора нескольких опций.
  • Использовать bind:value для реактивного контроля состояния и синхронизации с другими компонентами интерфейса.
  • Встраивать кастомные стили через CSS-переменные, сохраняя семантику и доступность.

Итоговая структура взаимодействия

  1. Toggle: один элемент, двоичное состояние.
  2. ToggleGroup: набор элементов с управлением выбора.
  3. bind: — реактивное связывание состояния.
  4. on:change — прослушивание изменений для логики приложения.
  5. CSS-переменные и слоты — кастомизация интерфейса.
  6. Accessibility — встроенная поддержка ARIA и клавиатурной навигации.

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

Оглавление