Tag

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

Импорт и базовое использование

Для работы с Tag необходимо импортировать компонент из библиотеки:

import { Tag } from 'antd';

Базовый пример отображения простого тега:

<Tag>Default Tag</Tag>

Результат — компактная метка с текстом внутри, имеющая стандартный серый фон.

Цвета тегов

Ant Design предоставляет несколько предустановленных цветов, которые позволяют обозначать разные состояния или категории:

<Tag color="magenta">Magenta</Tag>
<Tag color="red">Red</Tag>
<Tag color="volcano">Volcano</Tag>
<Tag color="orange">Orange</Tag>
<Tag color="gold">Gold</Tag>
<Tag color="lime">Lime</Tag>
<Tag color="green">Green</Tag>
<Tag color="cyan">Cyan</Tag>
<Tag color="blue">Blue</Tag>
<Tag color="geekblue">Geekblue</Tag>
<Tag color="purple">Purple</Tag>

Также можно использовать кастомные цвета с помощью CSS-переменных или hex-кодов:

<Tag color="#f50">Custom Red</Tag>
<Tag color="#2db7f5">Custom Blue</Tag>

Закрываемые теги

Тег может быть интерактивным и поддерживать закрытие пользователем. Для этого используется свойство closable и обработчик события onClose:

<Tag closable onCl ose={() => console.log('Tag closed')}>
  Closable Tag
</Tag>

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

const [tags, setTags] = useState(['Tag 1', 'Tag 2']);

const handleClose = removedTag => {
  setTags(tags.filter(tag => tag !== removedTag));
};

{tags.map(tag => (
  <Tag key={tag} closable onCl ose={() => handleClose(tag)}>
    {tag}
  </Tag>
))}

Теги с иконками

Компонент Tag может содержать иконку, используя встроенные иконки Ant Design или сторонние SVG:

import { CheckCircleOutlined } from '@ant-design/icons';

<Tag icon={<CheckCircleOutlined />} color="success">
  Success Tag
</Tag>

Иконка добавляется через свойство icon и автоматически располагается слева от текста.

Теги с состояния «ссылка»

Для реализации кликабельных тегов используется свойство onClick:

<Tag color="blue" onCl ick={() => alert('Tag clicked')}>
  Clickable Tag
</Tag>

Курсор автоматически меняется на pointer при наведении, что указывает на интерактивность.

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

Часто требуется создавать теги динамически, например, из пользовательского ввода. Ant Design рекомендует комбинировать Tag с компонентом Input:

const [tags, setTags] = useState(['Example']);

const addTag = (value) => {
  if (value && !tags.includes(value)) {
    setTags([...tags, value]);
  }
};

<Input
  placeholder="Add tag"
  onPressEn ter={e => {
    addTag(e.target.value);
    e.target.value = '';
  }}
/>
<div>
  {tags.map(tag => (
    <Tag key={tag} closable onCl ose={() => setTags(tags.filter(t => t !== tag))}>
      {tag}
    </Tag>
  ))}
</div>

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

Комбинация с Badge и Tooltip

Теги часто комбинируются с другими компонентами Ant Design, например:

  • Tooltip для пояснения содержания тега при наведении.
  • Badge для отображения количества элементов, связанных с тегом.

Пример:

import { Tooltip, Badge } from 'antd';

<Tooltip title="Number of items">
  <Badge count={5}>
    <Tag color="green">Active</Tag>
  </Badge>
</Tooltip>

Заключение по функциональности

Ключевые возможности компонента Tag:

  • Поддержка предустановленных и кастомных цветов.
  • Возможность закрытия тега с управлением состоянием.
  • Добавление иконок и обработчиков клика.
  • Интеграция с динамическими списками.
  • Комбинация с другими компонентами для расширенного UX.

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

Оглавление