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.
Übersicht
Warum Teams nach dieser Bibliothek suchen
Wähle diese Angular Avatar-Komponente, wenn du eine robuste Benutzeridentitäts-Oberfläche mit Fallbacks, Initialen, mehreren Bildquellen und design-system-freundlichen Styling-Hooks brauchst.
Installieren
npm install ng-hub-ui-avatarSpringen zu
Ideal für
- Benutzermenüs
- Teamlisten
- Aktivitäts-Feeds
- Profilkarten
Über avatar
ng-hub-ui-avatar hilft Angular-Anwendungen, Benutzer konsistent über Menüs, Profilkarten und kollaborative Oberflächen hinweg darzustellen. Es deckt die üblichen Sonderfälle wie fehlende Bilder, Generierung von Initialen, Statusindikatoren und gemeinsame Größenregeln ab.
Funktionsleitfäden
Avatar-Quellen
Lösen Sie Avatare aus sozialen Profilen, benutzerdefinierten Bildern, Namensinitialen oder einem benutzerdefinierten Wert auf, mit automatischem Fallback.
Beispiele:
Facebook-Profil
Facebook-Profil
Gravatar
Gravatar
GitHub-Profil
GitHub-Profil
Benutzerdefinierte Bildquelle
Benutzerdefinierte Bildquelle
Namensinitialen
Namensinitialen
Wertanzeige
Wertanzeige
Fallback-System
Degradieren Sie elegant durch jede konfigurierte Quelle, bis eine sinnvolle Darstellung angezeigt wird.
Beispiele:
Fallback-System
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.
Beispiele:
Benutzerdefinierte Größe
Benutzerdefinierte Größe
Textgrößenverhältnis
Textgrößenverhältnis
Größenbeschränkung der Initialen
Größenbeschränkung der Initialen
Styling
Form, Eckenradius, Farben, Rahmen und beliebige Inline-Styles — alle über Inputs und CSS-Variablen gesteuert.
Beispiele:
Runder Avatar
Runder Avatar
Eckenradius
Eckenradius
Hintergrund- & Vordergrundfarbe
Hintergrund- & Vordergrundfarbe
Rahmenfarbe
Rahmenfarbe
Benutzerdefinierte Stile
Benutzerdefinierte Stile
Interaktivität
Reagieren Sie auf Benutzerinteraktionen mit dem Avatar-Click-Event.
Beispiele:
Klick-Ereignishandler
Klick-Ereignishandler
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.
Beispiele:
Avatar-Gruppenanzeige
Avatar-Gruppenanzeige
Badge (Punkt & Zähler)
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.
Beispiele:
Eigener Inhalt (Icons, SVG)
Eigener Inhalt (Icons, SVG)
Hauptfunktionen
Letzte Änderungen
Version 19.0.3 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples