Avatar Avatar
Introduction
Un élément de profil utilisateur basé sur une image qui affiche des identifiants graphiques personnalisés. Il revient avec élégance à des initiales de nom formatées ou à une icône de placeholder universelle lorsque les sources d'image sont omises, en cours de chargement ou en échec de chargement. Principalement utilisé pour les déclencheurs de navigation de profil, les listes de messages, les avis et les annuaires communautaires.
Le composant Avatar est entièrement intégré en tant que bloc avatar dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de configurer facilement les chemins de profil, les échelles de taille et les thèmes visuels directement dans le CMS.
Utilisation
Ces exemples illustrent comment les éditeurs de contenu lient et structurent les composants d'avatar.
1. Avatar de profil haute fidélité (avec source image)
Charge une image utilisateur haute résolution. Gère automatiquement le chargement réseau en arrière-plan et s'anime à l'affichage une fois résolu.
{
"type": "avatar",
"src": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=200&auto=format&fit=crop",
"name": "Jane Doe",
"size": "lg",
"interactive": true
}
2. Repli sur initiales accentuées (sans source image)
Lorsque l'image de profil est absente, l'Avatar analyse automatiquement la propriété name de l'utilisateur pour calculer et afficher les bonnes initiales en majuscules (par ex. "Jane Doe" -> "JD") sur un thème de couleur accentué.
{
"type": "avatar",
"name": "Jane Doe",
"variant": "solid",
"colorPalette": "blue",
"size": "md",
"interactive": true
}
3. Avatar placeholder arrondi
Rend une icône utilisateur arrondie standard lorsque ni les chemins d'image ni les noms d'utilisateur ne sont fournis.
{
"type": "avatar",
"shape": "rounded",
"size": "md",
"interactive": true
}
Propriétés
| Propriété | Type de champ CMS | Défaut | Description / Options prises en charge |
|---|---|---|---|
Image de profil (src) | image | - | URL d'image ou chemin d'asset relatif. Fournir cela déclenche l'hydratation de Niveau 2. |
Nom d'utilisateur (name) | string | - | Nom de compte utilisateur. Analyse les premier et dernier caractères en initiales visuelles. |
Détails alternatifs (alt) | string | - | Descriptions textuelles alternatives de la photo pour les lecteurs d'écran. |
Échelle de taille (size) | select | "md" | Contrôle la hauteur, la largeur et l'échelle de texte des initiales de l'avatar. • Options : "2xs", "xs", "sm", "md", "lg", "xl", "2xl". |
Variante visuelle (variant) | select | "subtle" | Superposition de style appliquée au fond des initiales de repli. • Options : "solid", "surface", "subtle", "outline". |
Forme d'angle (shape) | select | "full" | Courbure des limites de l'avatar. • Options : "square", "rounded", "full". |
Thème de couleur (colorPalette) | select | "blue" | Couleur d'accent utilisée pour les thèmes de fond de repli. • Options : blue, green, red, purple, orange, amber, cyan, slate. |
Forcer interactif (interactive) | boolean | true | Assure un monitoring de chargement côté client immédiat et des transitions de repli fluides. |
Notes pour les développeurs et accessibilité
- Îlot d'hydratation : L'Avatar s'exécute comme un îlot conditionnel de Niveau 2. Si aucune image
srcn'est spécifiée, il compile directement en un balisage statique léger avec une empreinte JS client nulle. Si unesrcest fournie, il s'hydrate côté client pour gérer automatiquement les cycles de chargement asynchrones (loading->loaded/error). - Conformité WAI-ARIA : Sous le capot, les initiales et les icônes de repli opèrent dans des balises sémantiques
<span>. Si l'avatar joue un rôle purement décoratif, assurez-vous que l'attributaltest omis ou vide afin que les lecteurs d'écran le ignorent.