# AX - Avatar
## Aperçu
**AX - Avatar** est un composant Experience Cloud qui affiche des photos de profil, des initiales ou des icônes sur les pages des sites Experience pour représenter des utilisateurs, des contacts, des comptes ou n'importe quel enregistrement Salesforce.
Utilisez-le pour afficher les profils des utilisateurs du portail, les représentants de comptes, les listes de contacts ou les identifiants d'entité avec un style visuel cohérent. Le composant affiche automatiquement les images lorsqu'elles sont disponibles ou bascule vers les initiales ou les icônes.
Parfait pour les en-têtes de profil utilisateur, les listes de membres de la communauté, les annuaires de contacts ou tout endroit où les utilisateurs du portail ont besoin d'une identification visuelle des personnes ou des entités.
***
## Personnalisation de l'Avatar
Le composant Avonni Avatar vous aide à créer des représentations visuelles cohérentes des utilisateurs ou des entités au sein de votre site Salesforce Experience Cloud. Voici un guide étape par étape pour personnaliser l'Avatar selon vos besoins :
### **Affichage des initiales**
Le composant Avatar offre de la flexibilité dans la façon d'afficher les initiales :
#### **Saisie manuelle**
Si vous connaissez les initiales que vous souhaitez afficher, saisissez-les directement dans le champ "Initiales".
#### **Génération dynamique (Expressions)**
Pour rendre vos composants Avonni dynamiques, vous pouvez utiliser [Expressions Experience Cloud](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/demarrage/apprendre-les-bases#expressions). Par exemple, dans le composant Avatar ci‑dessous, vous pouvez utiliser l'expression suivante pour afficher automatiquement le nom de l'utilisateur actuellement connecté :
```
{!User.Record.Name}
```
Vous pouvez remplacer `Nom` par le nom réel du champ contenant le nom de l'utilisateur dans votre organisation Salesforce.
Si vous souhaitez générer automatiquement des initiales à partir d'un nom complet, activez l'option "Initiales formatées automatiquement". Cela utilisera des expressions Experience Cloud pour extraire et formater la première lettre de chaque mot du nom.
Affichage dynamique des initiales à partir du nom de l'utilisateur actuel
### **Image personnalisée**
Ajoutez une photo de profil, un logo ou toute image pour rendre l'Avatar immédiatement reconnaissable. Téléchargez votre image en utilisant l'option **Contenu sélectionné** — le composant la recadre et la formate automatiquement pour qu'elle s'adapte à la forme de l'Avatar.
Si aucune image n'est ajoutée, l'Avatar affiche à la place les initiales
### **Variant (forme)**
Choisissez entre **cercle** ou **carré** en utilisant le champ **Variante** pour correspondre au design de votre portail. Les avatars circulaires conviennent bien aux personnes, tandis que les formes carrées conviennent aux logos ou aux icônes d'entité
### **Taille**
Contrôlez la taille de l'Avatar sur la page en utilisant la **Taille** propriété. Les options vont de **x-small** à **xx-large**, afin que vous puissiez l'équilibrer avec le contenu environnant — plus petit pour des listes en ligne, plus grand pour les en-têtes de profil.
### **Texte principal et secondaire**
Affichez un contexte supplémentaire à côté de l'Avatar en ajoutant des champs de texte. Utilisez **Texte principal** pour l'information la plus importante (comme un nom complet) et **Texte secondaire** pour les détails complémentaires (comme le poste ou l'e-mail).
Vous pouvez également définir les styles de police pour chaque niveau de texte afin de créer une hiérarchie visuelle entre les informations principales et secondaires.
### **Etiquettes**
Ajoutez des libellés visuels pour catégoriser ou mettre en évidence des informations concernant l'Avatar. Les étiquettes apparaissent comme de petits badges et peuvent être stylisées avec différentes couleurs via l'option **Variante d'étiquette** — utile pour afficher le statut, le département, le rôle ou tout identifiant rapide.
***
## **Exemples d'utilisation**
**Profils utilisateur** – Créez des en-têtes de profil complets en combinant une image personnalisée avec un texte principal pour le nom de l'utilisateur et un texte secondaire pour son poste ou son département. Cela offre aux utilisateurs du portail une représentation claire et professionnelle sur leurs pages de profil.
**Forums communautaires** – Affichez des Avatars à côté des publications et des commentaires afin que les membres de la communauté puissent rapidement identifier qui contribue. Cela ajoute une touche personnelle qui encourage l'engagement et facilite le suivi des conversations.
**Pages d'équipe** – Mettez en valeur les membres de l'équipe avec des Avatars incluant noms, rôles et étiquettes pour le département ou l'expertise. Cela aide les utilisateurs du portail à trouver le bon contact et à comprendre la structure de l'équipe en un coup d'œil.
***
## Spécifications
{% tabs %}
{% tab title="Propriétés" %}
| Nom | Description |
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Initiales** | Saisissez des initiales spécifiques à afficher dans l'Avatar. Cela vous permet de définir manuellement les lettres représentatives pour un utilisateur ou une entité |
| **Initiales formatées automatiquement** | Cette fonctionnalité génère et affiche automatiquement des initiales à partir d'un nom complet fourni, garantissant une représentation cohérente sans saisie manuelle |
| **Nom de l'icône de secours** | Détermine l'icône de secours à afficher dans l'Avatar lorsque les données principales (comme une image ou des initiales) sont absentes, assurant une continuité visuelle |
| **Taille** | Ajustez les dimensions globales de l'Avatar pour l'adapter à différents contextes d'interface utilisateur |
| **Variante** | Choisissez entre une forme circulaire (`cercle`) ou carrée (`carré`) pour l'Avatar afin de vous aligner sur vos préférences de conception |
| **Masquer les détails de l'Avatar** | Basculer pour afficher ou masquer les détails supplémentaires associés à l'Avatar, tels que les textes ou les étiquettes |
| **Texte principal** | Le texte principal affiché à côté de l'Avatar, souvent utilisé pour les noms ou les identifiants principaux |
| **Style du texte principal** | Désignez le style de police pour le texte principal, en choisissant parmi des options comme Titre 1-4 ou Paragraphe 1-2 |
| **Texte secondaire** | Texte supplémentaire affiché sous le texte principal, adapté aux informations complémentaires ou aux sous-titres |
| **Style du texte secondaire** | Définissez le style de police pour le texte secondaire, avec des choix allant de Titre 1-4 à Paragraphe 1-2 |
| **Texte tertiaire** | Texte de troisième niveau, généralement utilisé pour des détails supplémentaires ou des attributs liés à l'Avatar |
| **Style du texte tertiaire** | Choisissez le style de police souhaité pour le texte tertiaire, avec des options incluant Titre 1-4 et Paragraphe 1-2 |
| **Position du texte** | Spécifiez l'alignement ou le positionnement des textes accompagnant l'Avatar, permettant une meilleure mise en page visuelle |
| **Etiquettes** | Définissez les propriétés pour les badges d'étiquette associés à l'Avatar, fournissant un moyen d'ajouter des marqueurs ou des indicateurs catégoriels à vos Avatars |
| {% endtab %} | |
{% tab title="Apparence" %}
| Attribut | Nom de la propriété | Description | Valeurs possibles |
| -------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | ----------------------------------------------------------- |
| **Texte principal** | Couleur du texte principal | Définit la couleur du texte principal dans l'Avatar | Valeurs de couleur standard, classes utilitaires de couleur |
| **Texte principal** | Taille de police du texte principal | Modifie la taille du texte principal | Valeurs de taille de police (par ex., 12px, 1rem) |
| **Texte principal** | Style de police du texte principal | Contrôle le style de police (par ex., italique, oblique) | Options de style de police standard |
| **Texte principal** | Épaisseur de la police du texte principal | Définit la graisse du texte principal | Valeurs de graisse de police (par ex., normal, bold) |
| **Texte secondaire** | Couleur du texte secondaire | Définit la couleur du texte secondaire | Valeurs de couleur standard, classes utilitaires de couleur |
| **Texte secondaire** | Taille de police du texte secondaire | Modifie la taille du texte secondaire | Valeurs de taille de police (par ex., 12px, 1rem) |
| **Texte secondaire** | Style de police du texte secondaire | Contrôle le style de police (par ex., italique, oblique) | Options de style de police standard |
| **Texte secondaire** | Épaisseur de la police du texte secondaire | Définit la graisse du texte secondaire | Valeurs de graisse de police (par ex., normal, bold) |
| **Texte tertiaire** | Couleur du texte tertiaire | Définit la couleur du texte de troisième niveau | Valeurs de couleur standard, classes utilitaires de couleur |
| **Texte tertiaire** | Taille de police du texte tertiaire | Modifie la taille du texte tertiaire | Valeurs de taille de police (par ex., 12px, 1rem) |
| **Texte tertiaire** | Style de police du texte tertiaire | Contrôle le style de police (par ex., italique, oblique) | Options de style de police standard |
| **Texte tertiaire** | Épaisseur de la police du texte tertiaire | Définit la graisse du texte tertiaire | Valeurs de graisse de police (par ex., normal, bold) |
| **Icône** | Couleur de fond de l'icône | Définit la couleur de fond de la zone d'icône | Valeurs de couleur standard, classes utilitaires de couleur |
| **Icône** | Couleur de premier plan de l'icône | Définit la couleur de l'image d'icône ou des initiales | Valeurs de couleur standard, classes utilitaires de couleur |
| **Icône** | Utilitaire de couleur de premier plan de l'icône | Applique un schéma de couleur prédéfini à l'icône | Noms de classes utilitaires spécifiques |
| **Icône** | Ajustement de l'image de l'icône | Contrôle la façon dont une image d'icône s'adapte à son espace | fill, contain, cover, none, scale-down |
| **Bordure** | Taille de la bordure | Spécifie la largeur de la bordure de l'Avatar | Valeurs en pixels (par ex., 1px, 2px) |
| **Bordure** | Rayon de la bordure | Contrôle l'arrondissement des coins de l'Avatar | Valeurs en pixels, % (par ex., 50% pour un cercle) |
| **Bordure** | Couleur de la bordure | Définit la couleur de la bordure de l'Avatar | Valeurs de couleur standard, classes utilitaires de couleur |
| **Bordure** | Style de la bordure | Définit l'apparence de la bordure (par ex., solid, dashed) | Styles de bordure CSS standard |
| **Initiales** | Couleur des initiales | Définit la couleur du texte pour les initiales affichées | Valeurs de couleur standard, classes utilitaires de couleur |
| **Initiales** | Couleur des initiales au survol | Couleur des initiales lorsque l'Avatar est survolé | Valeurs de couleur standard, classes utilitaires de couleur |
| **Initiales** | Graisse de la police des initiales | Contrôle la graisse du texte des initiales | Valeurs de graisse de police (par ex., normal, bold) |
| **Initiales** | Couleur d'entité | Couleur de fond lorsque des initiales sont générées | Valeurs de couleur standard, classes utilitaires de couleur |
| **Initiales** | Graisse de police de l'entité | Graisse de la police des initiales générées à partir d'une entité | Valeurs de graisse de police (par ex., normal, bold) |
| {% endtab %} | | | |
| {% endtabs %} | | | |
