SAvatar <s-avatar>

Affiche l'image d'une personne ou d'une entreprise, ou ses initiales en l'absence d'image. SAvatar est le wrapper Vue 3 typé du web component <s-avatar> de Shopify Polaris.

import { SAvatar } from 'polaris-vue-elements'

Bonnes pratiques

• Adaptez la taille au contexte. Choisissez une size plus petite pour les mises en page denses comme les tableaux et les listes, et une plus grande sur les pages de profil où la personne est au centre.
• Rédigez un texte alternatif utile. Indiquez dans alt qui ou ce que l'avatar représente, par exemple le nom d'une personne ou d'une entreprise. Si ce nom apparaît déjà en texte à côté de l'avatar, utilisez plutôt un alt vide.
• Placez-le à côté de ce qu'il représente. Mettez l'avatar juste à côté du nom ou de l'entité qu'il désigne, pour que le lien soit clair dans les listes, les tableaux et les cartes.

<SAvatar alt="Sarah Chen" initials="SC" size="large" />

Consultez les bonnes pratiques de Shopify pour <s-avatar> (en anglais) pour l'ensemble des recommandations.

Exemple

Les images ci-dessous sont chargées depuis picsum.photos, un service tiers d'images de remplacement, uniquement à des fins de démonstration.

<script setup>
import { SAvatar } from 'polaris-vue-elements'
</script>

<template>
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="small" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="base" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="large" />

  <!-- No src: falls back to initials -->
  <SAvatar initials="AL" alt="Ada Lovelace" size="large" />
</template>

Props

Prop	Type	Description
alt	string	Texte alternatif qui décrit l'avatar pour l'accessibilité. Fournit une description textuelle de l'avatar aux utilisateurs de technologies d'assistance et sert de solution de repli lorsque l'avatar ne se charge pas. Une description bien rédigée permet aux personnes malvoyantes de comprendre le contenu non textuel. Lorsqu'un lecteur d'écran rencontre un avatar, il lit cette description à voix haute. Lorsqu'un avatar ne se charge pas, ce texte s'affiche à l'écran, ce qui aide tous les utilisateurs à comprendre le contenu prévu. En savoir plus sur la rédaction d'un texte alternatif efficace et sur l'attribut alt.
initials	string	Les initiales à afficher dans l'avatar lorsqu'aucune image n'est fournie ou que son chargement échoue. Généralement un ou deux caractères représentant les initiales du prénom et du nom d'une personne, par exemple "JD" pour John Doe.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	La taille de l'image de l'avatar. - small-200 : avatar très petit, adapté aux affichages compacts ou aux listes comportant de nombreux éléments. - small-100 : alias de small. - small : petit avatar, adapté aux contextes secondaires ou aux mises en page serrées. - base : taille par défaut, adaptée à la plupart des contextes. - large : grand avatar pour la mise en valeur ou lorsque l'avatar est un point focal. - large-100 : alias de large. - large-200 : très grand avatar pour un affichage proéminent.
src	string	L'URL ou le chemin de l'image de l'avatar. Lorsqu'elle est fournie, l'image a priorité sur initials. Si l'image ne se charge pas ou se charge lentement, initials est affiché en solution de repli.

Events

Event	Type
error	Event
load	Event

Écoutez-les avec des listeners de la forme @error sur <SAvatar>.