Chips

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

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

  1. Статические и динамические чипсы

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

  2. События и взаимодействие

    • on:click – отслеживание кликов по чипсу.
    • on:remove – событие удаления чипса, обычно привязывается к кнопке с крестиком.
    • bind:group или bind:selected – управление состоянием выбранных чипсов, если поддерживается множественный выбор.

  3. Визуальные вариации

    • Стиль: заполненные (filled) и контурные (outlined).
    • Размеры: маленькие, стандартные, крупные (small, medium, large).
    • Цветовые схемы: поддержка тем и пользовательских цветов для группирования или выделения.

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

<script>
  import { Chip } from 'sveltekit-ui';
  
  let tags = ['JavaScript', 'Svelte', 'UI', 'Web'];
</script>

<div class="chip-container">
  {#each tags as tag (tag)}
    <Chip on:remove={() => tags = tags.filter(t => t !== tag)}>
      {tag}
    </Chip>
  {/each}
</div>

Разбор примера:

  • tags – массив, отображаемый как чипсы.
  • on:remove – удаляет выбранный чипс из массива при нажатии на крестик.
  • each с ключом (tag) – обеспечивает корректную работу анимаций и обновлений DOM при удалении элементов.

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

Chips часто используются в формах или фильтрах, где важно знать, какие элементы выбраны:

<script>
  import { Chip } from 'sveltekit-ui';
  
  let options = ['Red', 'Blue', 'Green', 'Yellow'];
  let selected = [];
</script>

<div class="chip-container">
  {#each options as color}
    <Chip
      bind:selected={selected}
      value={color}>
      {color}
    </Chip>
  {/each}
</div>

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

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

  • bind:selected позволяет синхронизировать состояние выбранных чипсов с переменной.
  • Множественный выбор поддерживается автоматически, если библиотека предоставляет соответствующую реализацию.

Динамическое добавление чипсов

<script>
  import { Chip, ChipInput } from 'sveltekit-ui';
  
  let tags = ['HTML', 'CSS'];
  let newTag = '';
  
  function addTag() {
    if (newTag && !tags.includes(newTag)) {
      tags = [...tags, newTag];
      newTag = '';
    }
  }
</script>

<ChipInput bind:value={newTag} on:enter={addTag} placeholder="Добавить тег" />

<div class="chip-container">
  {#each tags as tag (tag)}
    <Chip on:remove={() => tags = tags.filter(t => t !== tag)}>
      {tag}
    </Chip>
  {/each}
</div>

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

  • ChipInput – специализированный компонент для ввода новых чипсов.
  • Событие on:enter обрабатывает добавление нового значения.
  • Проверка !tags.includes(newTag) предотвращает дублирование тегов.

Настройка внешнего вида

Chips в SvelteKit UI библиотеках обычно имеют гибкие возможности кастомизации через props:

Свойство Описание
variant Определяет стиль: filled или outlined
size Размер чипса: small, medium, large
color Цвет фона или границы
removable Отображение кнопки удаления
icon Иконка слева от текста чипса

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

<Chip variant="outlined" color="purple" size="large" removable>
  SvelteKit
</Chip>

Интеграция с формами и фильтрами

Chips отлично подходят для выбора категорий и фильтров. Их можно использовать совместно с bind:selected или формой для отправки данных на сервер:

<form on:submit|preventDefault={() => console.log(selected)}>
  <div class="chip-container">
    {#each options as option}
      <Chip bind:selected={selected} value={option}>{option}</Chip>
    {/each}
  </div>
  <button type="submit">Применить фильтр</button>
</form>
  • При отправке формы переменная selected содержит массив выбранных значений.
  • Можно легко интегрировать с SvelteKit actions или fetch-запросами.

Анимации и интерактивность

Современные библиотеки SvelteKit UI поддерживают плавные анимации при добавлении и удалении чипсов:

<Chip transition:fade on:remove={handleRemove}>Анимированный чипс</Chip>
  • transition:fade – встроенный Svelte переход.
  • Можно комбинировать с slide, scale или кастомными анимациями для более выразительного UI.

Вывод

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

Оглавление