Avatar

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Persona, Profilbild, Benutzerabbild

Beschreibung: Die Avatar-Komponente zeigt entweder ein kleines Bild eines Benutzers oder dessen Initialen an, falls kein Bild vorhanden ist. Sie wird typischerweise in Benutzerprofilen, Kommentarbereichen oder Nutzerauflistungen verwendet, um eine schnelle visuelle Identifikation zu ermöglichen.

Beispiel

Darstellung der Komponente in der Standard-Ansicht. Code kann eingeblendet werden.

<KolAvatar _color="#5A5FEE" _label="Max Mustermann" />

Barrierefreiheit

• Semantischer Name: Die Komponente ist mit dem Attribut _label beschriftet, das den Namen des Benutzers enthält und von Screenreadern ausgelesen wird.
• Vertraute Initialen: Wenn kein Bild vorhanden ist, werden automatisch die Initialen basierend auf dem _label generiert und als visuelles Element angezeigt.
• Initialen ausgeblendet: Die automatisch generierten Initialen sind rein visuell und werden gegenüber assistiven Technologien bewusst ausgeblendet, da die semantische Information bereits über den _label verfügbar ist.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Label mit Klarnamen setzen: Verwenden Sie das Attribut _label immer mit dem echten Namen des Benutzers oder einer aussagekräftigen Beschreibung. Dies ist essentiell für Barrierefreiheit und Benutzerverständnis.
• Konsistente Farben: Nutzen Sie das Attribut _color, um verschiedene Benutzer farblich zu unterscheiden. Dies verbessert die visuelle Lesebarkeit und Erkennbarkeit.
• Fallback auf Initialen: Wenn nicht immer Benutzerbilder verfügbar sind, verlassen Sie sich auf die automatische Initialendarstellung als Fallback.
• Größenkompatibilität: Die Komponente ist für verschiedene Kontexte nutzbar – von kompakten Auflistungen bis zu größeren Profildarstellungen.

Anwendungsfälle

• Benutzerprofile und Kontoinformationen
• Kommentarbereiche und Diskussionsforen
• Benutzerlisten und Teambereiche
• Chat-Anwendungen und Messaging-Systeme
• Freigabeberechtigungen und Zusammenarbeitsfunktionen
• Aktivitätsfeeds mit Benutzerangaben

Konstruktion / Technik

Playground

Testen Sie die verschiedenen Eigenschaften der Avatar-Komponente:

<KolAvatar _color="#5A5FEE" _label="Max Mustermann" />

Funktionalitäten

Eigenständiger Avatar mit Initialen

Darstellung der Komponente ohne Bild – es werden automatisch die Initialen aus dem Namen generiert:

<KolAvatar _color="#5A5FEE" _label="Anna Schmidt" />

Avatar mit Bild

Darstellung eines Avatar-Bildes über das Attribut _src:

<KolAvatar _color="#5A5FEE" _label="Bei dem gleich gezeigten Bild handelt es sich um einen Standard-Avatar aus Font Awesome" _src="https://gravatar.com/avatar/12345?d=mp&s=256" />

Farbige Initialen

Verwendung des Attributs _color zur farblichen Unterscheidung von Benutzern. Das Attribut akzeptiert sowohl einen einfachen Farbwert als auch ein Objekt mit separaten Hintergrund- und Vordergrundfarben:

<KolAvatar _color="#FF6B6B" _label="Peter Meyer" />

Avatar mit separaten Farben

Präzise Kontrolle über Hintergrund- und Vordergrundfarbe:

<KolAvatar _color={{"backgroundColor":"#4ECDC4","foregroundColor":"#FFFFFF"}} _label="Julia Wolf" />

API

Overview

The Avatar component displays either a small image of the user or their initials if no image is available.

Properties

Property	Attribute	Description	Type	Default
_color	_color	Defines the backgroundColor and foregroundColor.	string | undefined | { backgroundColor: string; foregroundColor: string; }	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_src	_src	Sets the image src attribute to the given string.	string | undefined	undefined

---