Avatar

LhAvatar permet d'afficher l'avatar d'un utilisateur ou d'une entité, sous trois formes : image, icône et texte. En cas d'échec de chargement de l'image, un repli automatique est effectué.

Utilisation de base

Avatar à partir d'une image

fit contrôle le mode de recadrage (object-fit natif) et alt fournit le texte alternatif.

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

<template>
  <!-- Avatar à partir d'une image -->
  <LhAvatar src="https://api.dicebear.com/9.x/notionists/svg?seed=mo" />
  <!-- Recadrage fit + texte alternatif alt -->
  <LhAvatar
    src="https://api.dicebear.com/9.x/notionists/svg?seed=f"
    fit="cover"
    alt="Avatar de l'utilisateur"
  />
</template>

<script>
export default {}
</script>

<template>
  <!-- Avatar à partir d'une image -->
  <LhAvatar src="https://api.dicebear.com/9.x/notionists/svg?seed=mo" />
  <!-- Recadrage fit + texte alternatif alt -->
  <LhAvatar
    src="https://api.dicebear.com/9.x/notionists/svg?seed=f"
    fit="cover"
    alt="Avatar de l'utilisateur"
  />
</template>

Forme et taille

Rond ou carré, quatre tailles

SMLR

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

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar
      shape="square"
      size="small"
      text="S"
    />
    <LhAvatar
      shape="square"
      size="medium"
      text="M"
    />
    <LhAvatar
      shape="square"
      size="large"
      text="L"
    />
    <LhAvatar
      size="large"
      text="Rond"
    />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar
      shape="square"
      size="small"
      text="S"
    />
    <LhAvatar
      shape="square"
      size="medium"
      text="M"
    />
    <LhAvatar
      shape="square"
      size="large"
      text="L"
    />
    <LhAvatar
      size="large"
      text="Rond"
    />
  </div>
</template>

Repli sur icône et texte

En l'absence d'image, repli dans l'ordre icon, puis text

EA

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

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar text="Encre" />
    <LhAvatar icon="user" />
    <LhAvatar text="Alice Chen" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; align-items: center; gap: 12px">
    <LhAvatar text="Encre" />
    <LhAvatar icon="user" />
    <LhAvatar text="Alice Chen" />
  </div>
</template>

L'avatar textuel affiche automatiquement le premier caractère (premier caractère pour le chinois, première lettre mise en majuscule pour l'alphabet latin).

Échec de chargement de l'image

En cas d'échec, repli vers text et émission de l'événement error

<template>
  <LhAvatar
    src="/broken-avatar.png"
    text="Sec"
    @error="onError"
  />
</template>

<script setup lang="ts">
function onError(e: Event) {
  console.log('avatar load error', e)
}
</script>

<template>
  <LhAvatar
    src="/broken-avatar.png"
    text="Sec"
    @error="onError"
  />
</template>

<script>
export default {
  methods: {
    onError(e) {
      console.log('avatar load error', e)
    },
  },
}
</script>

API

Props

Propriété	Description	Type	Valeur par défaut
src	Adresse de l'image ; en l'absence de valeur, repli vers l'icône / le texte	string	—
alt	Texte alternatif	string	—
icon	Nom de l'icône (icônes intégrées de LhIcon, affichée lorsque src est absent)	LhIconName	—
text	Contenu textuel (en l'absence de src et d'icône, le premier caractère est affiché)	string	—
shape	Forme de l'avatar	"circle" | "square"	'circle'
size	Taille de l'avatar	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
fit	Mode de chargement de l'image : fill / contain / cover	"fill" | "contain" | "cover" | "none" | "scale-down"	'cover'
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
error	Émis en cas d'échec du chargement de l'image	(e: Event)

Accessibilité

• En mode image, le texte alternatif est fourni nativement par <img alt> ; en l'absence de alt, repli vers text, puis vers avatar
• En mode icône / texte, c'est l'élément racine qui endosse le rôle role="img", avec alt comme nom accessible le cas échéant ; l'icône elle-même est marquée aria-hidden

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/avatar/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) :

LhAvatarProps

export interface LhAvatarProps {
  /** Adresse de l'image ; en l'absence de valeur, repli successif vers l'icône, puis le texte */
  src?: string
  /** Texte alternatif en cas d'échec de chargement, également utilisé comme alt */
  alt?: string
  /** Nom de l'icône (affichée lorsque src est vide ou que le chargement échoue ; icônes intégrées de LhIcon) */
  icon?: LhIconName
  /** Contenu de l'avatar textuel (en l'absence de src et d'icône, le premier caractère est affiché) */
  text?: string
  /** Forme de l'avatar */
  shape?: LhAvatarComponentShape
  /** Taille de l'avatar */
  size?: LhAvatarSize
  /** Mode de chargement de l'image : fill / contain / cover */
  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhAvatarSize

export type LhAvatarSize = LhComponentSize

LhAvatarShape

export type LhAvatarShape = LhAvatarComponentShape

LhAvatarComponentShape _{(provient de @lh-ui/share/core/avatar)}

export type LhAvatarShape = 'circle' | 'square'

LhIconName _{(provient de @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

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

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