Etiqueta

Etiquetas para marcar y seleccionar.

Uso básico

Uso básico

Etiqueta predeterminadaEtiqueta principalEtiqueta de éxitoEtiqueta redondeadaEtiqueta con contornoTinta chinaEstilo chinoBiblioteca de componentes

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

export default function Demo() {
  const [tags, setTags] = useState(['Tinta', 'Estilo chino', 'Biblioteca de componentes'])

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

  return (
    <>
      <LhTag>Etiqueta predeterminada</LhTag>
      <LhTag type="primary">Etiqueta principal</LhTag>
      <LhTag type="success">Etiqueta de éxito</LhTag>
      <LhTag type="warning" round>Etiqueta redondeada</LhTag>
      <LhTag type="danger" hit>Etiqueta con borde</LhTag>
      {tags.map((tag) => (
        <LhTag key={tag} closable onClose={() => handleClose(tag)}>
          {tag}
        </LhTag>
      ))}
    </>
  )
}

Props de Tag

Prop	Descripción	Tipo	Opciones	Predeterminado
type	Tipo	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	Tamaño	'large' | 'middle' | 'small'	—	Según ConfigProvider
closable	Se puede cerrar	boolean	—	false
disabled	Desactivado (no responde a clic ni a cierre)	boolean	—	false
round	Bordes redondeados	boolean	—	false
hit	Forma con borde	boolean	—	false
sx	Propiedad abreviada de diseño	SxProps	—	—

Eventos de Tag

Evento	Descripción	Firma del callback	Equivalente en Vue
onClick	Se dispara al hacer clic (cuando se pasa onClick y no está disabled, el componente pasa a role="button")	(event: MouseEvent) => void	@click
onClose	Clic en el botón de cerrar	(event: MouseEvent) => void	@close

Interacción de teclado

Una Tag clicable se renderiza como role="button" y responde a Enter / Space. Consulta Accesibilidad.

Cerrar implica desmontaje (mejora de React)

Tras hacer clic en el botón de cerrar, la Tag se desmonta del DOM de inmediato y solo entonces emite onClose. En lh-ui-plus, @close solo emite el evento y es el v-if externo quien retira el nodo; React no tiene directivas, así que exigir un estado externo para controlar el desmontaje en escenarios de pura visualización resulta demasiado pesado, de modo que esta biblioteca incorpora el estado de cierre. Si necesitas controlar tú la visibilidad por completo, basta con envolverla en un renderizado condicional.

Estilos

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