Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Avatar-Quellen

Lösen Sie Avatare aus sozialen Profilen, benutzerdefinierten Bildern, Namensinitialen oder einem benutzerdefinierten Wert auf, mit automatischem Fallback.

Facebook-Profil

Gravatar

GitHub-Profil

Benutzerdefinierte Bildquelle

Namensinitialen

Wertanzeige

75%

Fallback-System

Degradieren Sie elegant durch jede konfigurierte Quelle, bis eine sinnvolle Darstellung angezeigt wird.

Fallback-System

Showing GitHub source (Facebook ID invalid)

Größenanpassung

Steuern Sie die Avatar-Abmessungen, das Verhältnis von Text zu Größe und wie viele Initialen gerendert werden.

Benutzerdefinierte Größe

Size: 60px

Textgrößenverhältnis

Text Ratio:

Größenbeschränkung der Initialen

Max Initials:

Styling

Form, Eckenradius, Farben, Rahmen und beliebige Inline-Styles — alle über Inputs und CSS-Variablen gesteuert.

Runder Avatar

Eckenradius

Hintergrund- & Vordergrundfarbe

Custom BG & FG (inputs)

Themed via --hub-avatar-bg-color ([autoColor]="false")

Rahmenfarbe

Benutzerdefinierte Stile

Interaktivität

Reagieren Sie auf Benutzerinteraktionen mit dem Avatar-Click-Event.

Klick-Ereignishandler

Click the avatar...

Gruppen & Badge

Avatare zu einer Gruppe stapeln und ein Eck-Badge einblenden — ein Präsenzpunkt oder ein Zähler — eingefärbt aus der semantischen Palette.

Avatar-Gruppenanzeige

Badge (Punkt & Zähler)

Eigener Inhalt

Projiziere ein beliebiges Icon, ein Inline-SVG, ein Bild oder ein Emoji in den Avatar. Es wird zentriert, mit Innenabstand versehen und auf die Avatar-Form beschnitten, agnostisch skaliert (Icon-Fonts skalieren, SVG/Bilder füllen) und über die üblichen bgColor- / fgColor-Inputs thematisiert.

Eigener Inhalt (Icons, SVG)

🚀