API-Referenz

Hier ist der vollständige Vertrag für avatar: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle avatar mit 19 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`size`	`string \| number`	`50`	Avatar-Größe in Pixeln
`name`	`string`	—	Benutzername zum Generieren von Initialen, wenn Bildquellen fehlschlagen
`src`	`string \| SafeUrl`	—	Primäre benutzerdefinierte Bildquellen-URL für den Avatar
`alt`	`string`	—	Alternativtext für das Avatar-Bild zur Barrierefreiheit
`round`	`boolean`	`true`	Ob der Avatar kreisförmig sein soll (true) oder cornerRadius folgen soll
`bgColor`	`string`	—	Hintergrundfarbe für Text-Avatare. Wird automatisch generiert, falls nicht angegeben
`fgColor`	`string`	`#FFF`	Schriftfarbe für Initialen in Text-Avataren
`borderColor`	`string`	—	Rahmenfarbe um den Avatar
`cornerRadius`	`string \| number`	`0`	Eckenradius, wenn round false ist
`textSizeRatio`	`number`	`3`	Verhältnis zur Berechnung der Textgröße aus der Avatar-Größe (size / textSizeRatio)
`initialsSize`	`string \| number`	`0`	Beschränkt die Anzahl der angezeigten Initialen (0 = keine Beschränkung)
`facebookId`	`string`	—	Facebook-Benutzer-ID für das Profilbild (nach bestem Bemühen, API-Einschränkungen können gelten)
`githubId`	`string`	—	GitHub-Benutzername zum Abrufen des Profilbilds
`gravatarId`	`string`	—	Gravatar-E-Mail oder MD5-Hash zum Abrufen des Profilbilds
`value`	`string`	—	Zeigt einen benutzerdefinierten Wert als Avatar an (z. B. "75%", "+5")
`style`	`Partial<CSSStyleDeclaration>`	—	Benutzerdefinierte Stile, die auf das Avatar-Wurzelelement angewendet werden
`referrerpolicy`	`string`	—	Referrer-Policy für das Avatar-Bild (z. B. "no-referrer")
`badge`	`string \| number \| boolean \| null`	—	Eck-Overlay: `badge` / `[badge]="true"` → ein Punkt; `badge="4k"` → eine Pille; null / fehlend → nichts.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	Semantische Badge-Farbe (primary · secondary · success · danger · warning · info · light · dark) → `--hub-sys-color-*`.

Outputs

Reagiere darauf, was avatar tut — 1 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`clickOnAvatar`	`Source`	Wird ausgelöst, wenn auf den Avatar geklickt wird; gibt das aktuell aktive Quellobjekt zurück

Templates

Noch keine Templates dokumentiert.

CSS-Variablen

Gestalte jedes Pixel mit 11 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.

Größe & Layout

Steuert die Abmessungen und Abstände des Avatars

Variable	Standard	Typ	Beschreibung
`--hub-avatar-size`	`50px`	length	Standard-Avatargröße, wenn keine Größe angegeben ist `24px40px64px96px`
`--hub-avatar-border-radius`	`50%`	length	Rahmenradius für den Avatar-Container `04px8px50%`

Farben & Erscheinungsbild

Passt die Farben und das visuelle Erscheinungsbild des Avatars an

Variable	Standard	Typ	Beschreibung
`--hub-avatar-bg-color`	`var(--hub-sys-color-primary)`	color	Hintergrundfarbe für Text-Avatare `#007bff#28a745#dc3545#6f42c1`
`--hub-avatar-text-color`	`#ffffff`	color	Schriftfarbe für Initialen in Text-Avataren `#000000#ffffff#6c757d`
`--hub-avatar-border-color`	`transparent`	color	Rahmenfarbe um den Avatar `#dee2e6#007bff#28a745`
`--hub-avatar-border-width`	`0`	length	Rahmenbreite um den Avatar `1px2px3px`

Typografie

Steuert das Erscheinungsbild des Textes in Avatar-Initialen

Variable	Standard	Typ	Beschreibung
`--hub-avatar-font-family`	`Helvetica, Arial, sans-serif`	string	Schriftfamilie für Avatar-Initialen `Inter, sans-serifRoboto, sans-serifsystem-ui`
`--hub-avatar-font-weight`	`normal`	string	Schriftstärke für Avatar-Initialen `400500600bold`
`--hub-avatar-text-transform`	`uppercase`	string	Texttransformation für Initialen `noneuppercaselowercasecapitalize`

Eigener Inhalt

Größe des in den Avatar projizierten Inhalts. Hintergrund und Vordergrund stammen aus den eigenen Tokens des Avatars.

Variable	Standard	Typ	Beschreibung
`--hub-avatar-content-padding`	`calc(var(--hub-avatar-size) * 0.2)`	length	Abstand zwischen dem projizierten Inhalt und dem Avatar-Rand. `8px15%calc(var(--hub-avatar-size) * 0.25)`
`--hub-avatar-content-icon-size`	`calc(var(--hub-avatar-size) * 0.55)`	length	Schriftgröße für projizierte Icon-Fonts / Emoji (wird vom Glyph geerbt). `1.5remcalc(var(--hub-avatar-size) * 0.6)`

Styling und Theming

Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.