Avatar
Einführung
Ein bildbasiertes Benutzerprofil-Element, das benutzerdefinierte grafische Kennungen anzeigt. Es fällt ordentlich auf formatierte Namenskürzel oder ein universelles Platzhalter-Symbol zurück, wenn Bildquellen weggelassen werden, beim Laden sind oder nicht geladen werden können. Hauptsächlich verwendet für Profil-Navigationstrigger, Nachrichtenlisten, Bewertungen und Community-Verzeichnisse.
Die Avatar-Komponente ist vollständig als avatar-Block im Page Builder integriert, sodass Inhaltsautoren und Entwickler Profilpfade, Größenstufen und visuelle Themen direkt im CMS konfigurieren können.
Verwendung
Diese Beispiele veranschaulichen, wie Inhaltsredakteure Avatar-Komponenten binden und strukturieren.
1. Profil-Avatar mit hoher Treue (mit Bildquelle)
Lädt ein hochauflösendes Benutzerbild. Verarbeitet automatisch das Hintergrund-Netzwerkladen und blendet es bei Auflösung animiert ein.
{
"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. Akzentuierter Initialen-Rückfall (ohne Bildquelle)
Wenn das Profilbild fehlt, parst der Avatar automatisch die name-Eigenschaft des Benutzers, um korrekte große Initialen zu berechnen und zu rendern (z. B. "Jane Doe" -> "JD") über einem akzentuierten Farbthema.
{
"type": "avatar",
"name": "Jane Doe",
"variant": "solid",
"colorPalette": "blue",
"size": "md",
"interactive": true
}
3. Abgerundeter Platzhalter-Avatar
Rendert ein standardmäßiges abgerundetes Benutzersymbol, wenn weder Bildpfade noch Benutzernamen angegeben werden.
{
"type": "avatar",
"shape": "rounded",
"size": "md",
"interactive": true
}
Eigenschaften
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Profilbild (src) | image | - | Bild-URL oder relativer Asset-Pfad. Die Angabe löst eine Tier-2-Hydration aus. |
Benutzername (name) | string | - | Kontobenutzername. Parst erste und letzte Zeichen in visuelle Initialen. |
Alternativdetails (alt) | string | - | Alternative Textbeschreibungen des Fotos für Screenreader. |
Größenstufe (size) | select | "md" | Steuert Höhe, Breite und Initialen-Textskalierung des Avatars. • Optionen: "2xs", "xs", "sm", "md", "lg", "xl", "2xl". |
Visuelle Variante (variant) | select | "subtle" | Auf den Hintergrund der Fallback-Initialen angewandtes Stil-Overlay. • Optionen: "solid", "surface", "subtle", "outline". |
Eckform (shape) | select | "full" | Krümmung der Avatar-Grenzen. • Optionen: "square", "rounded", "full". |
Farbschema (colorPalette) | select | "blue" | Akzentfarbe für Fallback-Hintergrundthemen. • Optionen: blue, green, red, purple, orange, amber, cyan, slate. |
Interaktiv erzwingen (interactive) | boolean | true | Stellt sofortiges clientseitiges Lade-Monitoring und sanfte Übergangs-Rückfälle sicher. |
Entwicklerhinweise & Barrierefreiheit
- Hydration-Insel: Der Avatar läuft als Tier-2-bedingte Insel. Wenn keine Bild-
srcangegeben ist, kompiliert er direkt zu leichtem statischem Markup mit null Client-JS-Footprint. Wenn einesrcangegeben wird, hydriert er clientseitig, um asynchrone Ladezyklen automatisch zu verwalten (loading->loaded/error). - WAI-ARIA-Konformität: Unter der Haube laufen Fallback-Initialen und -Symbole innerhalb semantischer
<span>-Tags. Wenn der Avatar eine rein dekorative Rolle spielt, stellen Sie sicher, dass dasalt-Attribut weggelassen oder leer ist, damit Screenreader ihn überspringen.