Tag

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

Основная структура Tag

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

import { Tag, TagLabel } from "@chakra-ui/react";

<Tag>
  <TagLabel>Example Tag</TagLabel>
</Tag>
  • Tag — контейнер для метки. Можно задавать размеры, цветовые схемы и форму.
  • TagLabel — текстовая часть метки. Всегда должна быть вложена в Tag.

Дополнительно для улучшения функциональности можно использовать TagLeftIcon и TagRightIcon.

Иконки в Tag

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

  • TagLeftIcon — размещается слева от текста.
  • TagRightIcon — размещается справа от текста, часто используется для кнопки закрытия.

Пример:

import { Tag, TagLabel, TagLeftIcon, TagRightIcon, CloseButton } from "@chakra-ui/react";
import { InfoIcon } from "@chakra-ui/icons";

<Tag size="lg" variant="subtle" colorScheme="blue">
  <TagLeftIcon boxSize="12px" as={InfoIcon} />
  <TagLabel>Information</TagLabel>
  <TagRightIcon as={CloseButton} />
</Tag>
  • size: можно использовать sm, md, lg.
  • variant: subtle, solid, outline.
  • colorScheme: определяет цветовую палитру компонента.

Варианты отображения

  1. Subtle — легкий фон, приглушенный цвет текста.
  2. Solid — насыщенный цвет фона и текста.
  3. Outline — прозрачный фон с рамкой соответствующего цвета.
<Tag variant="subtle" colorScheme="green">Subtle Tag</Tag>
<Tag variant="solid" colorScheme="red">Solid Tag</Tag>
<Tag variant="outline" colorScheme="purple">Outline Tag</Tag>

Размеры Tag

Размеры задаются через свойство size, влияя на высоту, отступы и размер шрифта:

<Tag size="sm" colorScheme="teal">Small Tag</Tag>
<Tag size="md" colorScheme="orange">Medium Tag</Tag>
<Tag size="lg" colorScheme="pink">Large Tag</Tag>

Добавление кнопки удаления

Для реализации возможности удаления метки используется компонент CloseButton, который можно разместить внутри TagRightIcon:

<Tag size="md" variant="solid" colorScheme="red">
  <TagLabel>Removable Tag</TagLabel>
  <TagRightIcon as={CloseButton} onCl ick={() => console.log("Tag removed")} />
</Tag>

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

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

  • colorScheme — задаёт основную цветовую палитру: blue, red, green, purple, pink, orange, teal, cyan и др.
  • variant и size — позволяют изменять визуальный стиль.
  • Можно использовать sx или style props для дополнительной кастомизации:
<Tag 
  size="lg" 
  variant="solid" 
  colorScheme="purple" 
  borderRadius="full" 
  px={4} 
  py={2}
>
  Custom Styled Tag
</Tag>
  • borderRadius управляет скруглением углов.
  • px и py — внутренние отступы по горизонтали и вертикали.

Группы Tag

Для отображения нескольких меток можно использовать HStack или Wrap:

import { Wrap, WrapItem } from "@chakra-ui/react";

<Wrap spacing={2}>
  <WrapItem>
    <Tag colorScheme="blue">Tag 1</Tag>
  </WrapItem>
  <WrapItem>
    <Tag colorScheme="green">Tag 2</Tag>
  </WrapItem>
  <WrapItem>
    <Tag colorScheme="red">Tag 3</Tag>
  </WrapItem>
</Wrap>
  • Wrap автоматически переносит теги на новую строку при переполнении.
  • WrapItem служит контейнером для отдельного тега.

Использование Tag с динамическими данными

При работе с массивами данных удобно рендерить теги через map:

const tags = ["JavaScript", "React", "Chakra UI"];

<Wrap spacing={2}>
  {tags.map((item, index) => (
    <WrapItem key={index}>
      <Tag colorScheme="teal">{item}</Tag>
    </WrapItem>
  ))}
</Wrap>

Такой подход позволяет легко создавать динамические списки меток, например, для фильтров или категорий.

Важные моменты

  • Адаптивность: Tag автоматически подстраивается под размер текста и отступы.
  • Доступность: компоненты Chakra UI имеют встроенные aria-атрибуты, улучшая доступность интерфейса.
  • Композиция: Tag легко комбинируется с иконками, кнопками и другими элементами интерфейса.

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

Оглавление