Étiquette

Étiquettes servant au marquage et à la sélection.

Utilisation de base

Utilisation de base

Étiquette par défautÉtiquette principaleÉtiquette de succèsÉtiquette arrondieÉtiquette avec contourEncre de ChineStyle chinoisBibliothèque de composants

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

export default function Demo() {
  const [tags, setTags] = useState(['Encre', 'Style chinois', 'Bibliothèque de composants'])

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

  return (
    <>
      <LhTag>Étiquette par défaut</LhTag>
      <LhTag type="primary">Étiquette principale</LhTag>
      <LhTag type="success">Étiquette de succès</LhTag>
      <LhTag type="warning" round>Étiquette arrondie</LhTag>
      <LhTag type="danger" hit>Étiquette avec bordure</LhTag>
      {tags.map((tag) => (
        <LhTag key={tag} closable onClose={() => handleClose(tag)}>
          {tag}
        </LhTag>
      ))}
    </>
  )
}

Tag Props

Prop	Description	Type	Options	Valeur par défaut
type	Type	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	Taille	'large' | 'middle' | 'small'	—	Selon ConfigProvider
closable	Fermable	boolean	—	false
disabled	Désactivé (ne répond ni au clic ni à la fermeture)	boolean	—	false
round	Angle arrondi	boolean	—	false
hit	Forme avec bordure	boolean	—	false
sx	Raccourci de mise en page	SxProps	—	—

Événements de Tag

Événement	Description	Signature du callback	Équivalent Vue
onClick	Déclenché au clic (lorsque onClick est fourni et que l'état n'est pas disabled, le composant est promu role="button")	(event: MouseEvent) => void	@click
onClose	Clic sur le bouton de fermeture	(event: MouseEvent) => void	@close

Interaction clavier

Une étiquette cliquable est rendue en role="button" et répond à Enter / Space. Voir Accessibilité.

Démontage à la fermeture (amélioration React)

Après un clic sur le bouton de fermeture, le Tag est immédiatement démonté du DOM, et onClose n'est émis qu'ensuite. Dans lh-ui-plus, @close émet seulement l'événement et c'est un v-if externe qui retire le nœud ; React ne dispose pas de directive, et exiger un état externe pour contrôler le démontage dans un scénario de pur affichage serait trop lourd, la bibliothèque intègre donc l'état fermé. Pour garder le contrôle total de la visibilité, un simple rendu conditionnel autour du composant suffit.

Styles

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