Étiquette

Étiquette légère. Couleur sémantique type + formes round/hit + fermable.

Étiquette

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhTag>Par défaut</LhTag>
      <LhTag type="primary">Primaire</LhTag>
      <LhTag type="success">Succès</LhTag>
      <LhTag type="warning">Avertissement</LhTag>
      <LhTag type="danger">Danger</LhTag>
      <LhTag type="info">Information</LhTag>
    </div>
    <div class="demo-row">
      <LhTag size="small">Petit</LhTag>
      <LhTag size="medium">Taille par défaut</LhTag>
      <LhTag size="large">Grand</LhTag>
      <LhTag type="primary" round>Arrondi</LhTag>
      <LhTag type="primary" hit>Contour (hit)</LhTag>
    </div>
    <div class="demo-row">
      <LhTag type="primary" closable @close="closed = true">Fermable</LhTag>
      <LhTag v-if="!closed" type="info" round>Masqué après fermeture</LhTag>
      <LhTag type="warning" disabled>Désactivé</LhTag>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ closed: false }),
}
</script>

Props

Prop	Description	Type	Valeur par défaut
type	Couleur sémantique	'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'default'
size	Taille	'small' \| 'medium' \| 'large'	'medium'
closable	Afficher le bouton de fermeture (aria-label issu du pack de langue)	boolean	false
disabled	Désactivé (le bouton de fermeture est intercepté)	boolean	false
round / hit	Arrondi / contour en relief	boolean	false
onClose	Rappel de fermeture (coexiste avec l'événement close)	(e: Event) => void	—
sx	Propriétés de mise en page rapide	—	—

Events

Événement	Description	Paramètre de callback
click	Émis au clic	(e: MouseEvent)
close	Émis au clic sur le bouton de fermeture (coexiste avec la prop onClose)	(e: Event)