FluffyTails

This is a angular library for commonly used components.

Install

$ npm i @knymbus/fluffy-tails

In your Module

import { FluffyTailsModule } from fluffy-tails

1. Avatar

<ft-avatar size="35" name="John Doe" src="image/1.jpg"></ft-avatar>

Attributes

• size: default 25 - this is the size of the avatar component
• name: this is use to get the first letter of the first name as such you can pass a letter in as well.

<ft-avatar size="35" name="J" src="image/1.jpg"></ft-avatar>

• src: this is you image src, the image you want to appear in the avatar

if src and name is given then the src get priority however it's recommended that both is given as if you src link is broken then it will fallback to name and keep your design clean.

you can also use with computed vars

<ft-avatar [size]="mySize" [name]="myName" [src]="mySrc"><ft-avatar>

and in your .ts file

mySize: string = "35"
mySrc: string = "image/1.jpg"
myName: string = "John Doe"

Default Behaivour

• size is default to 24px
• Image is default to random images
• Name is default to empty string

If your img url is broken and the name is set then the display fallback to initial.