Badge

LhBadge permet d'afficher un nombre de messages non lus ou un marqueur d'état.

Utilisation de base

⁵

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge :value="5">
    <div>Contenu cible</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge :value="5">
    <div>Contenu cible</div>
  </LhBadge>
</template>

Valeur maximale personnalisée

⁹⁹⁺

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge
    :value="100"
    :max="99"
  >
    <div>Contenu cible</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    :value="100"
    :max="99"
  >
    <div>Contenu cible</div>
  </LhBadge>
</template>

Point rouge

is-dot affiche uniquement un point rouge, sans valeur précise. Idéal pour les notifications de type « du nouveau », avec la possibilité de changer de couleur via type.

Messages

À faire

vue

<script setup lang="ts">
</script>

<template>
  <!-- Point rouge -->
  <LhBadge is-dot>
    <div>Contenu cible</div>
  </LhBadge>
  <!-- Point rouge (couleur d'avertissement) -->
  <LhBadge is-dot type="warning">
    <div>Contenu cible</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Point rouge -->
  <LhBadge is-dot>
    <div>Contenu cible</div>
  </LhBadge>
  <!-- Point rouge (couleur d'avertissement) -->
  <LhBadge is-dot type="warning">
    <div>Contenu cible</div>
  </LhBadge>
</template>

Décalage, valeur zéro et contenu personnalisé

offset ajuste finement la position du badge (décalage en px sous la forme [x, y]) ; show-zero permet d'afficher la valeur zéro ; content remplace le nombre par un texte personnalisé.

offset

⁵

show-zero

⁰

content

^Nouveau

vue

<script setup lang="ts">
</script>

<template>
  <!-- Décalage -->
  <LhBadge :value="5" :offset="[6, 6]">
    <div>Contenu cible</div>
  </LhBadge>
  <!-- Valeur zéro affichée -->
  <LhBadge :value="0" show-zero>
    <div>Contenu cible</div>
  </LhBadge>
  <!-- Contenu personnalisé -->
  <LhBadge value="Nouveau" content="Nouveau">
    <div>Contenu cible</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Décalage -->
  <LhBadge :value="5" :offset="[6, 6]">
    <div>Contenu cible</div>
  </LhBadge>
  <!-- Valeur zéro affichée -->
  <LhBadge :value="0" show-zero>
    <div>Contenu cible</div>
  </LhBadge>
  <!-- Contenu personnalisé -->
  <LhBadge value="Nouveau" content="Nouveau">
    <div>Contenu cible</div>
  </LhBadge>
</template>

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge is-dot>
    <div>Contenu cible</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge is-dot>
    <div>Contenu cible</div>
  </LhBadge>
</template>

Types

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge
    type="primary"
    :value="2"
  >
    <div>Primary</div>
  </LhBadge>
  <LhBadge
    type="success"
    :value="1"
  >
    <div>Success</div>
  </LhBadge>
  <LhBadge
    type="warning"
    :value="1"
  >
    <div>Warning</div>
  </LhBadge>
  <LhBadge
    type="info"
    :value="1"
  >
    <div>Info</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    type="primary"
    :value="2"
  >
    <div>Primary</div>
  </LhBadge>
  <LhBadge
    type="success"
    :value="1"
  >
    <div>Success</div>
  </LhBadge>
  <LhBadge
    type="warning"
    :value="1"
  >
    <div>Warning</div>
  </LhBadge>
  <LhBadge
    type="info"
    :value="1"
  >
    <div>Info</div>
  </LhBadge>
</template>

Tailles

⁵

vue

<script setup lang="ts">
</script>

<template>
  <LhBadge
    size="small"
    :value="5"
  >
    <div>Small</div>
  </LhBadge>
  <LhBadge
    size="medium"
    :value="5"
  >
    <div>Medium</div>
  </LhBadge>
  <LhBadge
    size="large"
    :value="5"
  >
    <div>Large</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    size="small"
    :value="5"
  >
    <div>Small</div>
  </LhBadge>
  <LhBadge
    size="medium"
    :value="5"
  >
    <div>Medium</div>
  </LhBadge>
  <LhBadge
    size="large"
    :value="5"
  >
    <div>Large</div>
  </LhBadge>
</template>

Contrôle de l'affichage et du masquage

¹⁰

vue

<script setup lang="ts">
import { ref } from 'vue'

const badgeValue = ref(10)
const isHidden = ref(false)
</script>

<template>
  <LhBadge
    :value="badgeValue"
    :hidden="isHidden"
  >
    <div>Contenu cible</div>
  </LhBadge>
  <LhButton @click="isHidden = !isHidden">
    {{ isHidden ? 'Afficher' : 'Masquer' }}
  </LhButton>
</template>

vue

<script>
import { ref } from 'vue'

const badgeValue = ref(10)
const isHidden = ref(false)
</script>

<template>
  <LhBadge
    :value="badgeValue"
    :hidden="isHidden"
  >
    <div>Contenu cible</div>
  </LhBadge>
  <LhButton @click="isHidden = !isHidden">
    {{ isHidden ? 'Afficher' : 'Masquer' }}
  </LhButton>
</template>

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/badge/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhBadgeProps

export interface LhBadgeProps {
  type?: LhBadgeType
  value?: string | number
  size?: LhBadgeSize
  max?: number
  isDot?: boolean
  hidden?: boolean
  offset?: [number, number]
  showZero?: boolean
  content?: string
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhBadgeSize

export type LhBadgeSize = LhComponentSize

LhBadgeOffset

export type LhBadgeOffset = [number, number]

LhBadgeType _{(provient de @lh-ui/share/core/badge)}

export type LhBadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'

LhComponentSize _{(provient de @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

Internationalisation

Le texte du badge peut être internationalisé au moyen de LhConfigProvider et des packs de langue.

消息

⁵

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhBadge, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- Changement de pack de langue via ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhBadge :value="5">
      <div>{{ locale === 'zh-CN' ? '消息' : 'Messages' }}</div>
    </LhBadge>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhBadge, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhBadge, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- Changement de pack de langue via ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhBadge :value="5">
      <div>{{ locale === 'zh-CN' ? '消息' : 'Messages' }}</div>
    </LhBadge>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

API

Propriété	Description	Type	Valeur par défaut
type	Type de badge	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'danger'`
value	Valeur affichée	`string \| number`	—
size	Taille	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
max	Valeur maximale	`number`	`99`
isDot	Mode point	`boolean`	`false`
hidden	Masquer le badge	`boolean`	`false`
offset	Décalage	`[number, number]`	—
showZero	Afficher la valeur 0	`boolean`	`false`
content	Contenu personnalisé	`string`	—
sx	Propriétés de mise en page rapide (par exemple `{ mt: 2, w: '50%' }`), converties en style inline sur l'élément racine	`LhSxProps`	—

Accessibilité

En mode point (is-dot), le badge est purement décoratif : marqué aria-hidden, il n'entre pas dans l'arbre d'accessibilité
En mode numérique, le contenu textuel est conservé afin que les lecteurs d'écran puissent annoncer le compteur (« 99+ » par exemple)

Badge ​

Utilisation de base ​

Valeur maximale personnalisée ​

Point rouge ​

Décalage, valeur zéro et contenu personnalisé ​

Types ​

Tailles ​

Contrôle de l'affichage et du masquage ​

Définitions de types ​

Internationalisation ​

API ​

Accessibilité ​