Badge

Marqueur numérique ou d'état au coin d'une icône ou d'un bouton. Prise en charge des palettes par type, de la troncature par max, du point rouge, de l'affichage ou du masquage de la valeur zéro et du décalage de position.

Badge

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge :value="12" type="primary">
        <LhButton>Messages non lus</LhButton>
      </LhBadge>
      <LhBadge :value="999" :max="99">
        <LhButton>Troncature au-delà de max</LhButton>
      </LhBadge>
      <LhBadge is-dot>
        <LhButton>Mode point rouge</LhButton>
      </LhBadge>
      <LhBadge :value="0" :show-zero="true">
        <LhButton>showZero</LhButton>
      </LhBadge>
      <LhBadge :value="0">
        <LhButton>La valeur zéro est masquée par défaut</LhButton>
      </LhBadge>
      <LhBadge :value="3" type="danger" size="small">
        <LhButton>Taille small</LhButton>
      </LhBadge>
    </div>
    <p class="demo-note">offset ajuste la position / hidden masque / content personnalise le texte</p>
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge content="Nouveau" type="danger" :offset="[6, 4]">
        <LhButton>Décalage offset</LhButton>
      </LhBadge>
      <LhBadge :value="5" :hidden="hidden">
        <LhButton>Interrupteur hidden</LhButton>
      </LhBadge>
      <LhButton size="small" @click="hidden = !hidden">{{ hidden ? "Afficher le badge" : "Masquer le badge" }}</LhButton>
    </div>
  </div>
</template>

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

Props

Prop	Description	Type	Valeur par défaut
type	Palette par type	'primary' \| 'success' \| 'warning' \| 'danger'	'danger'
value	Valeur numérique du badge (tronquée en max+ au-delà de max)	string \| number	—
size	Taille	'small' \| 'default' \| 'large'	'default'
max	Plafond numérique	number	—
isDot	Mode point rouge (ignore la valeur)	boolean	false
hidden	Masquer le badge	boolean	false
offset	Décalage par rapport à la position par défaut [x, y]	[number, number]	—
showZero	Afficher même lorsque la valeur est 0	boolean	false
content	Texte personnalisé (remplace la valeur)	string	—
sx	Raccourci de mise en page sx	—	—

Slots

Slot par défaut : élément hôte sur lequel le badge est monté.