Avatar

An image element with a fallback for representing the user.

RG

Installation

npx nx g @spartan-ng/cli:ui avatar

Usage

import { HlmAvatarImage, HlmAvatar, HlmAvatarFallback } 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

BrnAvatar

Selector: brn-avatar

BrnAvatarFallback

Selector: [brnAvatarFallback]

ExportAs: avatarFallback

Inputs

PropTypeDefaultDescription
class ClassValue --

BrnAvatarImage

Selector: img[brnAvatarImage]

ExportAs: avatarImage

Helm API

HlmAvatar

Selector: hlm-avatar

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmAvatarFallback

Selector: [hlmAvatarFallback]

ExportAs: avatarFallback

HlmAvatarImage

Selector: img[hlmAvatarImage]

ExportAs: avatarImage

Inputs

PropTypeDefaultDescription
class ClassValue --
Badge Aspect Ratio