Тег

Метки для маркировки и выбора.

Базовое использование

Базовое использование

Тег по умолчаниюОсновной тегТег успехаСкруглённый тегТег с контуромТушьКитайский стильБиблиотека компонентов

import { useState } from 'react'
import { LhTag } from '@lh-ui/react'

export default function Demo() {
  const [tags, setTags] = useState(['Тушь', 'Китайский стиль', 'Библиотека компонентов'])

  const handleClose = (tag: string) => {
    setTags((prev) => prev.filter((item) => item !== tag))
  }

  return (
    <>
      <LhTag>Обычный тег</LhTag>
      <LhTag type="primary">Основной тег</LhTag>
      <LhTag type="success">Тег успеха</LhTag>
      <LhTag type="warning" round>Скруглённый тег</LhTag>
      <LhTag type="danger" hit>Контурный тег</LhTag>
      {tags.map((tag) => (
        <LhTag key={tag} closable onClose={() => handleClose(tag)}>
          {tag}
        </LhTag>
      ))}
    </>
  )
}

Tag Props

Свойство	Описание	Тип	Варианты	По умолчанию
type	Тип	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	Размер	'large' | 'middle' | 'small'	—	Из ConfigProvider
closable	Можно закрыть	boolean	—	false
disabled	Отключён (не отвечает на клик и закрытие)	boolean	—	false
round	Скруглённые углы	boolean	—	false
hit	Контурный стиль	boolean	—	false
sx	Сокращённые props макета	SxProps	—	—

События Tag

Событие	Описание	Сигнатура коллбэка	Аналог в Vue
onClick	Срабатывает по клику (если передан onClick и компонент не disabled, он повышается до role="button")	(event: MouseEvent) => void	@click
onClose	Клик по кнопке закрытия	(event: MouseEvent) => void	@close

Взаимодействие с клавиатурой

Кликабельный Tag рендерится как role="button" и реагирует на Enter / Space. См. Доступность.

Размонтирование при закрытии (улучшение React)

После клика по кнопке закрытия Tag немедленно размонтируется из DOM, и лишь затем выбрасывает onClose. В lh-ui-plus @close лишь выбрасывает событие, а узел удаляет внешняя сторона через v-if; в React нет директив, и ради размонтирования сугубо демонстрационного тега вынуждать внешнее управление state слишком тяжело, поэтому закрытое состояние встроено. Если нужен полный контроль над видимостью — оберните тег в условный рендеринг.

Стили

import '@lh-ui/react/style/tag'