Angular Avatar-Komponente | ng-hub-ui-avatar

Angular Avatar-Komponente mit Initialen, Fallback-Bildern, Präsenz-Badges und CSS-Variablen für wiederverwendbare Oberflächen zur Benutzeridentität.

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

JD

Wertanzeige

75%

Fallback-System

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

Fallback-System

Fallback Initials

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

SD
RS
3.5rem
CS
calc(2rem + 12px)
PS
72 (pixels)

Textgrößenverhältnis

RD

Größenbeschränkung der Initialen

JD

Styling

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

Runder Avatar

R

Eckenradius

R

Hintergrund- & Vordergrundfarbe

C
Custom BG & FG (inputs)
TD
Themed via --hub-avatar-bg-color ([autoColor]="false")

Initialen, die immer lesbar bleiben

The automatic palette, as it paints today

Eight names, one per palette slot. Each avatar writes black or white on the colour its name hashed to, and the first ratio below it is read back from the two colours the browser actually painted. The second is what white initials would have scored on that same colour — what the component forced before 22.14.0, and what six of these eight would still be doing.

  • GH
    measuring…
  • AL
    measuring…
  • LT
    measuring…
  • BL
    measuring…
  • DK
    measuring…
  • AT
    measuring…
  • KT
    measuring…
  • AB
    measuring…

Those six are stated rather than shown on purpose: a row of white-on-yellow initials would be a page about readable labels printing six unreadable ones. An explicit fgColor does still win, contrast or not — that is how you pin the old look, and the snippet below is all it takes.

A palette the library has never seen

#ffcc00, #cccccc and #004080 — three colours the library ships no knowledge of. An application hands them to provideAvatar({ colors }) once at bootstrap; this demo scopes the same palette to its own avatars so it does not repaint the rest of the page. Either way the ink is derived from whatever colour ends up behind the text, so the guarantee travels with the background rather than with a list of approved pairings.

  • VR
    measuring…
  • IN
    measuring…
  • RP
    measuring…

Rahmenfarbe

B

Benutzerdefinierte Stile

S

Interaktivität

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

Klick-Ereignishandler

CM
Click the avatar, or focus it and press Enter…

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

A
B
C
+3

Badge (Punkt & Zähler)

AL
GH
AT
LT
CMF
4k
JD
9+

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)

🚀