Sections
Get Started
Components
import { Component } from '@angular/core'
import { UbAvatar, UbAvatarFallback, UbAvatarImage } from '@/components/ui/avatar'
@Component({
standalone: true,
imports: [UbAvatar, UbAvatarImage, UbAvatarFallback],
template: `
<div class="flex flex-row flex-wrap items-center gap-12">
<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
<span ubAvatar class="rounded-lg">
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
<div class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
</div>
</div>
`,
})
export class AvatarDemo {}Installation
Install the following dependencies:
Copy and paste the following code into your project.
import { computed, Directive, input } from '@angular/core'
import { RdxAvatarImageDirective, RdxAvatarRootDirective } from '@radix-ng/primitives/avatar'
import { cn } from '@/lib/utils'
@Directive({
standalone: true,
selector: 'span[ubAvatar],ub-avatar',
host: {
'data-slot': 'avatar',
'[class]': 'computedClass()',
},
hostDirectives: [RdxAvatarRootDirective],
})
export class UbAvatar {
readonly class = input<string>()
protected readonly computedClass = computed(() => cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', this.class()))
}
@Directive({
standalone: true,
selector: 'img[ubAvatarImage]',
host: {
'data-slot': 'avatar-image',
'[class]': 'computedClass()',
},
hostDirectives: [
{
directive: RdxAvatarImageDirective,
inputs: ['src', 'referrerPolicy'],
outputs: ['onLoadingStatusChange'],
},
],
})
export class UbAvatarImage {
readonly class = input<string>()
protected readonly computedClass = computed(() => cn('aspect-square size-full', this.class()))
}
@Directive({
standalone: true,
selector: 'span[ubAvatarFallback], ub-avatar-fallback',
host: {
'data-slot': 'avatar-fallback',
'[class]': 'computedClass()',
},
})
export class UbAvatarFallback {
readonly class = input<string>()
protected readonly computedClass = computed(() => cn('bg-muted flex size-full items-center justify-center rounded-full', this.class()))
} Expand
Update the import paths to match your project setup.
Usage
import { UbAvatar, UbAvatarFallback, UbAvatarImage } from "@/components/ui/avatar"
<span ubAvatar> <img ubAvatarImage src="https://github.com/adrian-ub.png" /> <span ubAvatarFallback>UB</span> </span>