Docs
Avatar
Avatar
An image element with a fallback for representing the user.
Loading...
Loading...
import { Component } from '@angular/core'
import { UbAvatarDirective, UbAvatarFallbackDirective, UbAvatarImageDirective } from '~/components/ui/avatar'
@Component({
standalone: true,
selector: 'avatar-demo-new-york',
imports: [UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective],
template: `
<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
`,
})
export class AvatarDemoNewYork { }import { Component } from '@angular/core'
import { UbAvatarDirective, UbAvatarFallbackDirective, UbAvatarImageDirective } from '~/components/ui/avatar'
@Component({
standalone: true,
selector: 'avatar-demo-default',
imports: [UbAvatarDirective, UbAvatarImageDirective, UbAvatarFallbackDirective],
template: `
<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>
`,
})
export class AvatarDemoDefault { }Installation
pnpm dlx shadcn-ng@latest add avatar
npx shadcn-ng@latest add avatar
npx shadcn-ng@latest add avatar
bunx --bun shadcn-ng@latest add avatar
Copy and paste the following code into your project.
import { computed, Directive, input } from '@angular/core'
import { RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective } from '@radix-ng/primitives/avatar'
import { cn } from '~/lib/utils'
@Directive({
standalone: true,
selector: 'span[ubAvatar]',
hostDirectives: [RdxAvatarRootDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class())
})
}
@Directive({
standalone: true,
selector: 'img[ubAvatarImage]',
hostDirectives: [
{
directive: RdxAvatarImageDirective,
inputs: ['src'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarImageDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('aspect-square h-full w-full', this.class())
})
}
@Directive({
standalone: true,
selector: 'span[ubAvatarFallback]',
hostDirectives: [
{
directive: RdxAvatarFallbackDirective,
inputs: ['delayMs'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarFallbackDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class())
})
}import { computed, Directive, input } from '@angular/core'
import { RdxAvatarFallbackDirective, RdxAvatarImageDirective, RdxAvatarRootDirective } from '@radix-ng/primitives/avatar'
import { cn } from '~/lib/utils'
@Directive({
standalone: true,
selector: 'span[ubAvatar]',
hostDirectives: [RdxAvatarRootDirective],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', this.class())
})
}
@Directive({
standalone: true,
selector: 'img[ubAvatarImage]',
hostDirectives: [
{
directive: RdxAvatarImageDirective,
inputs: ['src'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarImageDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('aspect-square h-full w-full', this.class())
})
}
@Directive({
standalone: true,
selector: 'span[ubAvatarFallback]',
hostDirectives: [
{
directive: RdxAvatarFallbackDirective,
inputs: ['delayMs'],
},
],
host: {
'[class]': 'computedClass()',
},
})
export class UbAvatarFallbackDirective {
readonly class = input<string>()
readonly computedClass = computed(() => {
return cn('flex h-full w-full items-center justify-center rounded-full bg-muted', this.class())
})
}Update the import paths to match your project setup.
Usage
import {
UbAvatarDirective,
UbAvatarImageDirective,
UbAvatarFallbackDirective
} from '~/components/ui/avatar.directive'<span ubAvatar>
<img src="https://github.com/adrian-ub.png" alt="@adrianub" ubAvatarImage />
<span ubAvatarFallback>UB</span>
</span>