# AX - Avatar
## Übersicht
**AX - Avatar** ist eine Experience Cloud-Komponente, die Profilbilder, Initialen oder Symbole auf Experience Sites-Seiten anzeigt, um Benutzer, Kontakte, Accounts oder beliebige Salesforce-Datensätze darzustellen.
Verwenden Sie sie, um Portalbenutzerprofile, Account-Vertreter, Kontaktlisten oder Entitätskennungen mit einheitlicher visueller Gestaltung anzuzeigen. Die Komponente zeigt automatisch Bilder an, wenn diese verfügbar sind, oder greift auf Initialen oder Symbole zurück.
Perfekt für Benutzerprofil-Kopfzeilen, Mitgliederlisten einer Community, Kontaktverzeichnisse oder überall dort, wo Portalbenutzer eine visuelle Identifikation von Personen oder Entitäten benötigen.
***
## Anpassen des Avatars
Die Avonni Avatar-Komponente hilft Ihnen, visuell konsistente Darstellungen von Benutzern oder Entitäten innerhalb Ihrer Salesforce Experience Cloud-Site zu erstellen. Hier ist eine Schritt-für-Schritt-Anleitung, um den Avatar an Ihre Bedürfnisse anzupassen:
### **Initialen anzeigen**
Die Avatar-Komponente bietet Flexibilität bei der Anzeige von Initialen:
#### **Manuelle Eingabe**
Wenn Sie die anzuzeigenden Initialen kennen, geben Sie sie direkt in das Feld "Initialen" ein.
#### **Dynamische Generierung (Expressions)**
Um Ihre Avonni-Komponenten dynamisch zu machen, können Sie [Experience Cloud Expressions](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/erste-schritte/die-grundlagen-lernen#expressions)verwenden. Zum Beispiel können Sie in der folgenden Avatar-Komponente den folgenden Ausdruck verwenden, um automatisch den Namen des aktuell angemeldeten Benutzers anzuzeigen:
```
{!User.Record.Name}
```
Sie können `Name` durch den tatsächlichen Feldnamen ersetzen, der den Namen des Benutzers in Ihrer Salesforce-Organisation speichert.
Wenn Sie Initialen automatisch aus einem vollständigen Namen generieren möchten, aktivieren Sie die Option "Initialen automatisch formatiert". Dadurch werden Experience Cloud-Ausdrücke verwendet, um den ersten Buchstaben jedes Wortes im Namen zu extrahieren und zu formatieren.
Initialen dynamisch aus dem Namen des aktuellen Benutzers anzeigen
### **Benutzerdefiniertes Bild**
Fügen Sie ein Profilfoto, Logo oder ein beliebiges Bild hinzu, um den Avatar sofort erkennbar zu machen. Laden Sie Ihr Bild über die **Ausgewählte Inhalte** Option hoch — die Komponente schneidet und formatiert es automatisch so zu, dass es in die Avatar-Form passt.
Wenn kein Bild hinzugefügt wird, zeigt der Avatar stattdessen Initialen an
### **Variante (Form)**
Wählen Sie zwischen **Kreis** oder **Quadrat** mithilfe des **Variante** Feldes, um es an das Design Ihres Portals anzupassen. Runde Avatare eignen sich gut für Personen, während quadratische Formen für Logos oder Entitätssymbole passen
### **Größe**
Steuern Sie, wie groß der Avatar auf der Seite erscheint, mithilfe der **Größe** Eigenschaft. Die Optionen reichen von **x-klein** bis **xx-groß**, sodass Sie ihn mit dem umgebenden Inhalt ausbalancieren können — kleiner für Inline-Listen, größer für Profilkopfzeilen.
### **Primärer und sekundärer Text**
Zeigen Sie zusätzlichen Kontext neben dem Avatar an, indem Sie Textfelder hinzufügen. Verwenden Sie **Primärtext** für die wichtigsten Informationen (wie einen vollständigen Namen) und **Sekundärtext** für unterstützende Details (wie Berufsbezeichnung oder E-Mail).
Sie können auch Schriftstile für jede Textebene festlegen, um eine visuelle Hierarchie zwischen den primären und sekundären Informationen zu erstellen.
### **Tags**
Fügen Sie visuelle Labels hinzu, um Informationen über den Avatar zu kategorisieren oder hervorzuheben. Tags erscheinen als kleine Abzeichen und können mit verschiedenen Farben mithilfe der **Tag-Variante** Option gestylt werden — nützlich, um Status, Abteilung, Rolle oder beliebige schnelle Kennungen anzuzeigen.
***
## **Beispielanwendungsfälle**
**Benutzerprofile** – Erstellen Sie vollständige Profilkopfzeilen, indem Sie ein benutzerdefiniertes Bild mit Primärtext für den Namen des Benutzers und Sekundärtext für dessen Berufsbezeichnung oder Abteilung kombinieren. Dies bietet Portalbenutzern eine klare, professionelle Darstellung auf ihren Profilseiten.
**Community-Foren** – Zeigen Sie Avatare neben Beiträgen und Kommentaren an, damit Community-Mitglieder schnell erkennen können, wer beiträgt. Dies verleiht eine persönliche Note, die die Beteiligung fördert und Konversationen leichter nachvollziehbar macht.
**Teamseiten** – Präsentieren Sie Teammitglieder mit Avataren, die Namen, Rollen und Tags für Abteilung oder Fachgebiet enthalten. Dies hilft Portalbenutzern, den richtigen Kontakt zu finden und die Teamstruktur auf einen Blick zu verstehen.
***
## Spezifikationen
{% tabs %}
{% tab title="Eigenschaften" %}
| Name | Beschreibung |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Initialen** | Geben Sie spezifische Initialen ein, die im Avatar angezeigt werden sollen. Damit können Sie die repräsentativen Buchstaben für einen Benutzer oder eine Entität manuell festlegen |
| **Initialen automatisch formatiert** | Diese Funktion generiert und zeigt Initialen automatisch basierend auf einem angegebenen vollständigen Namen an und sorgt so für eine konsistente Darstellung ohne manuelle Eingabe |
| **Fallback-Symbolname** | Bestimmt das Ersatzsymbol, das im Avatar angezeigt wird, wenn primäre Daten (wie ein Bild oder Initialen) fehlen, und stellt so visuelle Kontinuität sicher |
| **Größe** | Passen Sie die Gesamtabmessungen des Avatars an, damit er in verschiedene UI-Kontexte passt |
| **Variante** | Wählen Sie zwischen einer kreisförmigen (`Kreis`) oder einer quadratischen (`Quadrat`) Form für den Avatar, um ihn an Ihre Designpräferenzen anzupassen |
| **Avatar-Details ausblenden** | Umschalten, um zusätzliche mit dem Avatar verbundene Details wie Texte oder Tags anzuzeigen oder zu verbergen |
| **Primärtext** | Der Haupttext, der neben dem Avatar angezeigt wird, oft verwendet für Namen oder Hauptkennungen |
| **Primärtext-Stil** | Bestimmen Sie den Schriftstil für den Primärtext und wählen Sie aus Optionen wie Überschrift 1-4 oder Absatz 1-2 |
| **Sekundärtext** | Zusätzlicher Text, der unter dem Primärtext angezeigt wird und sich für ergänzende Informationen oder Unterüberschriften eignet |
| **Sekundärtext-Stil** | Definieren Sie den Schriftstil für den Sekundärtext mit Auswahlmöglichkeiten von Überschrift 1-4 bis Absatz 1-2 |
| **Tertiärer Text** | Text dritter Ebene, typischerweise verwendet für zusätzliche Details oder Attribute im Zusammenhang mit dem Avatar |
| **Tertiärer Textstil** | Wählen Sie den gewünschten Schriftstil für den tertiären Text, mit Optionen einschließlich Überschrift 1-4 und Absatz 1-2 |
| **Textposition** | Geben Sie die Ausrichtung oder Positionierung der begleitenden Texte in Bezug auf den Avatar an, um ein besseres visuelles Layout zu ermöglichen |
| **Tags** | Legen Sie Eigenschaften für beliebige Badge-Tags fest, die mit dem Avatar verbunden sind, und bieten Sie so eine Möglichkeit, kategoriale Markierungen oder Indikatoren zu Ihren Avataren hinzuzufügen |
| {% endtab %} | |
{% tab title="Erscheinungsbild" %}
| Attribut | Eigenschaftsname | Beschreibung | Mögliche Werte |
| ------------------ | -------------------------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------- |
| **Primärtext** | Farbe des Primärtexts | Legt die Farbe des Haupttexts im Avatar fest | Standardfarbwerte, Farb-Utility-Klassen |
| **Primärtext** | Schriftgröße des Primärtexts | Ändert die Größe des Primärtexts | Schriftgrößenwerte (z. B. 12px, 1rem) |
| **Primärtext** | Schriftstil des Primärtexts | Steuert den Schriftstil (z. B. kursiv, schräg) | Standardoptionen für Schriftstile |
| **Primärtext** | Schriftstärke des Primärtexts | Definiert die Fettigkeit des Primärtexts | Werte für Schriftstärke (z. B. normal, fett) |
| **Sekundärtext** | Farbe des Sekundärtexts | Legt die Farbe des ergänzenden Texts fest | Standardfarbwerte, Farb-Utility-Klassen |
| **Sekundärtext** | Schriftgröße des Sekundärtexts | Ändert die Größe des Sekundärtexts | Schriftgrößenwerte (z. B. 12px, 1rem) |
| **Sekundärtext** | Schriftstil des Sekundärtexts | Steuert den Schriftstil (z. B. kursiv, schräg) | Standardoptionen für Schriftstile |
| **Sekundärtext** | Schriftstärke des Sekundärtexts | Definiert die Fettigkeit des Sekundärtexts | Werte für Schriftstärke (z. B. normal, fett) |
| **Tertiärer Text** | Farbe des tertiären Texts | Legt die Farbe des Texts dritter Ebene fest | Standardfarbwerte, Farb-Utility-Klassen |
| **Tertiärer Text** | Schriftgröße des tertiären Texts | Ändert die Größe des tertiären Texts | Schriftgrößenwerte (z. B. 12px, 1rem) |
| **Tertiärer Text** | Schriftstil des tertiären Texts | Steuert den Schriftstil (z. B. kursiv, schräg) | Standardoptionen für Schriftstile |
| **Tertiärer Text** | Schriftstärke des tertiären Texts | Definiert die Fettigkeit des tertiären Texts | Werte für Schriftstärke (z. B. normal, fett) |
| **Symbol** | Hintergrundfarbe des Symbols | Legt die Hintergrundfarbe des Symbolbereichs fest | Standardfarbwerte, Farb-Utility-Klassen |
| **Symbol** | Vordergrundfarbe des Symbols | Legt die Farbe des Symbolbilds oder der Initialen fest | Standardfarbwerte, Farb-Utility-Klassen |
| **Symbol** | Vordergrund-Farb-Utility für das Symbol | Wendet ein vordefiniertes Farbschema auf das Symbol an | Spezifische Utility-Klassennamen |
| **Symbol** | Anpassung des Symbolbildes an den verfügbaren Raum | Steuert, wie ein Symbolbild innerhalb seines Bereichs skaliert bzw. eingefügt wird | fill, contain, cover, none, scale-down |
| **Rahmen** | Rahmengröße | Gibt die Breite des Avatar-Rahmens an | Pixelwerte (z. B. 1px, 2px) |
| **Rahmen** | Radius des Rahmens | Steuert die Rundung der Avatar-Ecken | Pixelwerte, % (z. B. 50% für einen Kreis) |
| **Rahmen** | Rahmenfarbe | Legt die Farbe des Avatar-Rahmens fest | Standardfarbwerte, Farb-Utility-Klassen |
| **Rahmen** | Rahmenstil | Definiert das Aussehen des Rahmens (z. B. solid, dashed) | Standard-CSS-Rahmenstile |
| **Initialen** | Initialenfarbe | Legt die Textfarbe für die angezeigten Initialen fest | Standardfarbwerte, Farb-Utility-Klassen |
| **Initialen** | Initialenfarbe bei Hover | Farbe der Initialen, wenn der Avatar mit der Maus überfahren wird | Standardfarbwerte, Farb-Utility-Klassen |
| **Initialen** | Schriftstärke der Initialen | Steuert die Fettigkeit des Initialentexts | Werte für Schriftstärke (z. B. normal, fett) |
| **Initialen** | Entitätsfarbe | Hintergrundfarbe, wenn Initialen generiert werden | Standardfarbwerte, Farb-Utility-Klassen |
| **Initialen** | Schriftstärke der Entität | Schriftstärke der aus einer Entität generierten Initialen | Werte für Schriftstärke (z. B. normal, fett) |
| {% endtab %} | | | |
| {% endtabs %} | | | |
