Toggle и Toggle Group

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

Структура Toggle

Типичная структура Toggle включает:

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

<Toggle bind:checked={isActive} disabled={false}>
  Активировать режим
</Toggle>

Ключевые свойства:

  • bind:checked — двусторонняя привязка состояния компонента к переменной.
  • disabled — блокировка взаимодействия.
  • size — размер переключателя (sm, md, lg).
  • color — цвет активного состояния (может принимать CSS-переменные или готовые темы библиотеки).

События Toggle:

  • on:change — срабатывает при изменении состояния.
  • on:focus / on:blur — для отслеживания фокуса компонента.
  • on:keydown — позволяет интегрировать управление с клавиатуры.

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

<Toggle bind:checked={isActive} on:change={(e) => console.log(e.detail)}>
  Включить уведомления
</Toggle>

e.detail возвращает новое состояние переключателя.

Toggle Group

Toggle Group объединяет несколько Toggle в логически связанную группу, поддерживая как множественный выбор, так и выбор одной опции. Это аналог радио-кнопок и чекбоксов, но с единым управлением состояния и консистентным визуальным стилем.

<script>
  import { ToggleGroup, Toggle } from 'sveltekit-ui';
  let selectedValues = [];
</script>

<ToggleGroup bind:value={selectedValues} type="multiple">
  <Toggle value="apple">Яблоко</Toggle>
  <Toggle value="banana">Банан</Toggle>
  <Toggle value="orange">Апельсин</Toggle>
</ToggleGroup>

Ключевые свойства ToggleGroup:

  • bind:value — массив выбранных значений (для type="multiple") или строка/число (для type="single").
  • type — "single" для одиночного выбора или "multiple" для множественного.
  • orientation — "horizontal" или "vertical" для управления направлением расположения.
  • disabled — глобальная блокировка всех Toggle внутри группы.
  • size и color наследуются от Toggle, но могут переопределяться на уровне группы.

События ToggleGroup:

  • on:change — возвращает массив выбранных значений для множественного выбора или значение для одиночного.
  • on:focus / on:blur — срабатывают при входе/выходе фокуса из всей группы.

Пример для одиночного выбора:

<script>
  let selected = "banana";
</script>

<ToggleGroup bind:value={selected} type="single" orientation="horizontal">
  <Toggle value="apple">Яблоко</Toggle>
  <Toggle value="banana">Банан</Toggle>
  <Toggle value="orange">Апельсин</Toggle>
</ToggleGroup>

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

Управление состоянием и реактивность

SvelteKit UI Toggle и ToggleGroup полностью интегрируются с реактивной системой Svelte. Это позволяет:

  • Автоматически обновлять состояние интерфейса при изменении переменных.
  • Использовать логические выражения для динамического управления состоянием:
<Toggle bind:checked={isActive} disabled={selectedValues.length === 0}>
  Включить режим
</Toggle>
  • Создавать взаимозависимые группы переключателей с условной логикой включения/отключения.

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

Toggle и ToggleGroup поддерживают:

  1. CSS-переменные для цветов:

    --toggle-active-bg: #4caf50;
--toggle-inactive-bg: #ccc;

  2. Tailwind-классы (если библиотека интегрирована с Tailwind):

    <Toggle class="bg-gray-200 rounded-full p-1" bind:checked={isActive}/>

  3. Иконки и кастомные лейблы:

    <Toggle bind:checked={isActive}>
  {#if isActive}
    <svg>...</svg>
  {:else}
    Вкл/Выкл
  {/if}
</Toggle>

  4. Анимации состояния через transition или CSS:

    <Toggle bind:checked={isActive} class="transition duration-300 ease-in-out"/>

Практические сценарии использования

  • Настройка пользовательских предпочтений (темы, уведомления, доступность).
  • Формы с множественным выбором опций.
  • Динамические панели инструментов и фильтры.
  • Переключение между режимами отображения данных (список/карточки/грид).

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

Советы по архитектуре

  • Использовать bind:value вместо ручного слушателя on:change для уменьшения количества кода.

  • Разделять группы по логике — каждая ToggleGroup отвечает за отдельный блок опций.

  • Для больших форм с динамическими опциями рекомендуется создавать массив объектов и рендерить Toggle через {#each}:

    <ToggleGroup bind:value={selectedValues} type="multiple">
  {#each options as option}
    <Toggle value={option.value}>{option.label}</Toggle>
  {/each}
</ToggleGroup>

  • Следить за доступностью: использовать aria-checked, aria-disabled автоматически или при кастомной реализации.

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

Оглавление