Avatar
An image element with a fallback for representing the user.
import { Component } from '@angular/core';
import { HlmAvatar, HlmAvatarFallback, HlmAvatarImage } from '@spartan-ng/helm/avatar';
@Component({
selector: 'spartan-avatar-preview',
imports: [HlmAvatarImage, HlmAvatar, HlmAvatarFallback],
template: `
<hlm-avatar variant="large">
<img src="/assets/avatar.png" alt="spartan logo. Resembling a spartanic shield" hlmAvatarImage />
<span class="bg-[#FD005B] text-white" hlmAvatarFallback>RG</span>
</hlm-avatar>
`,
})
export class AvatarPreview {}Installation
npx nx g @spartan-ng/cli:ui avatar
ng g @spartan-ng/cli:ui avatar
Usage
import { HlmAvatarImageDirective, HlmAvatarComponent, HlmAvatarFallbackDirective } from '@spartan-ng/helm/avatar';<hlm-avatar>
<img src='/assets/avatar.png' alt='spartan logo. Resembling a spartanic shield' hlmAvatarImage />
<span class='text-white bg-destructive' hlmAvatarFallback>RG</span>
</hlm-avatar>Brain API
Mock
Selector: brn-mock
BrnAvatar
Selector: brn-avatar
BrnMock
Selector: brn-mock
BrnAvatarFallback
Selector: [brnAvatarFallback]
ExportAs: avatarFallback
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
BrnAvatarImage
Selector: img[brnAvatarImage]
ExportAs: avatarImage
Helm API
Mock
Selector: hlm-mock
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | - | - |
HlmAvatar
Selector: hlm-avatar
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmMock
Selector: hlm-mock
HlmAvatarFallback
Selector: [hlmAvatarFallback]
ExportAs: avatarFallback
HlmAvatarImage
Selector: img[hlmAvatarImage]
ExportAs: avatarImage
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |