Интерактивные теги с закрытием

Интерактивные теги (Tag) с возможностью закрытия — это компонент пользовательского интерфейса, позволяющий отображать элементы данных, которые можно динамически удалять. В Carbon Components Svelte они реализованы с акцентом на доступность, наглядность и гибкость в кастомизации.

Основная структура компонента

Компонент тега с закрытием в Svelte импортируется из библиотеки следующим образом:

<script>
  import { Tag } from 'carbon-components-svelte';
  let tags = [
    { id: 1, label: 'Svelte', type: 'red' },
    { id: 2, label: 'JavaScript', type: 'green' },
    { id: 3, label: 'UI', type: 'blue' }
  ];

  function removeTag(id) {
    tags = tags.filter(tag => tag.id !== id);
  }
</script>

В JSX-подобной разметке Svelte компонент используется через цикл:

{#each tags as tag (tag.id)}
  <Tag type={tag.type} on:close={() => removeTag(tag.id)} closeButton={true}>
    {tag.label}
  </Tag>
{/each}

Ключевые моменты:

  • type — задаёт цветовой стиль тега (например, 'red', 'green', 'blue').
  • closeButton — включает кнопку закрытия. По умолчанию кнопка скрыта.
  • Событие on:close активируется при нажатии на кнопку закрытия.

Настройка стиля тега

Carbon Components Svelte предоставляет несколько стандартных стилей для тегов:

  • red — опасные или критичные элементы.
  • green — успешные или подтверждённые элементы.
  • blue — информационные элементы.
  • gray — нейтральные элементы.

Пример динамического изменения цвета:

<Tag type={tag.type} on:close={() => removeTag(tag.id)}>
  {tag.label}
</Tag>

Цвет можно менять программно, например, на основе состояния:

tag.type = tag.completed ? 'green' : 'blue';

Работа с событиями

Событие закрытия (on:close) является основным для интерактивных тегов. Оно возвращает стандартный объект события Svelte, что позволяет:

  • Удалять тег из массива данных.
  • Выполнять анимацию исчезновения.
  • Логировать действия пользователя.

Пример с анимацией:

{#each tags as tag (tag.id)}
  <Tag
    type={tag.type}
    on:close={() => {
      tags = tags.filter(t => t.id !== tag.id);
    }}
    closeButton={true}
    transition:fade={{ duration: 200 }}
  >
    {tag.label}
  </Tag>
{/each}

Использование transition:fade плавно скрывает тег, улучшая UX.

Доступность и ARIA

Компонент Tag из Carbon автоматически поддерживает базовые атрибуты доступности:

  • Кнопка закрытия имеет aria-label="Remove tag".
  • Можно явно указать aria-label для кастомной подписи:
<Tag
  type="green"
  closeButton={true}
  aria-label="Удалить тег Svelte"
  on:close={() => removeTag(tag.id)}
>
  Svelte
</Tag>

Это позволяет поддерживать экранные читалки и соблюдает рекомендации WCAG.

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

Добавление новых тегов осуществляется простым изменением массива tags. Пример с вводом пользователя:

<script>
  let inputValue = '';
  
  function addTag() {
    if (inputValue.trim() !== '') {
      tags = [...tags, { id: Date.now(), label: inputValue, type: 'blue' }];
      inputValue = '';
    }
  }
</script>

<input type="text" bind:value={inputValue} placeholder="Новый тег" />
<button on:click={addTag}>Добавить</button>

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

Сложные комбинации тегов

Теги могут использоваться вместе с другими компонентами Carbon, например:

  • MultiSelect — для выбора нескольких значений и отображения выбранных как теги.
  • Pill — для компактного отображения с иконками.
  • Tooltip — для показа подсказки при наведении на тег.

Пример сочетания с Tooltip:

<Tag type="green" closeButton={true} on:close={() => removeTag(tag.id)}>
  <Tooltip content="Это тег Svelte">{tag.label}</Tooltip>
</Tag>

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

  1. Всегда использовать уникальный id для тегов в цикле {#each}.
  2. Динамически менять type для визуальной категоризации.
  3. Поддерживать aria-label для кнопки закрытия для доступности.
  4. Использовать Svelte transitions для плавного исчезновения.
  5. Сохранять массив тегов в реактивной переменной для автоматического обновления интерфейса.

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

Оглавление