Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

Avatar

An image element with a fallback for representing the user.

import { Component } from '@angular/core';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';

@Component({
	selector: 'spartan-avatar-preview',
	imports: [HlmAvatarImports],
	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

Usage

import { HlmAvatarImports } 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

Prop	Type	Default	Description
class	ClassValue	-	-

BrnAvatarImage

Selector: img[brnAvatarImage]

ExportAs: avatarImage

Helm API

HlmAvatar

Selector: hlm-avatar

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

HlmAvatarFallback

Selector: [hlmAvatarFallback]

ExportAs: avatarFallback

HlmAvatarImage

Selector: img[hlmAvatarImage]

ExportAs: avatarImage

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Badge

Autocomplete