hybrid-avatar v0.1.10

HybridAvatar

Provides a simple avatar that can display:

• a provided image e.g. a user's profile pic
• 1 or 2 character text e.g. a user's initials
• a default 'user' image of not phot or name is provided

This library was generated with Angular CLI version 11.2.12.

Usage

Module

Import the package to your component.

Import { HybridAvatarModule } from 'hybrid-avatar'

@NgModule({imports: [HybridAvatarModule]

HTML

Add the tag to your HTML:

<hybrid-avatarattributes></hybrid-avatar>

HTML Attributes

The HTML tag can include the following inputs

photo

String value containing an image URL that will be displayed in the avatar.

example:
<hybrid-avatar photo="https://randomuser.me/api/portraits/women/1.jpg"></hybrid-avatar>

name

String value that will be shortened to the first character of the first word and, if more than one word, the first character of the last word.

examples
<hybrid-avatar name="Emogene Atteberry"></hybrid-avatar> will display EA <hybrid-avatar name="Emogene"></hybrid-avatar> will display E

NOTE: If no value is provided for photo or text attributes then a default 'user' avatar image is displayed

size

This attribute determines the size of the avatar.

color

String value that can be used to provide the hex value for the avatar background color.

Only used if the avatar will display text e.g. a value is provided for name and no value provided for photo

NOTE: If no value is provided for color then the avatar color will default to #808080

textcolor

String value that can be used to provide the hex value for the avatar text color.

Only used if the avatar will display text e.g. a value is provided for name and no value provided for photo

If no value is provided the default value is #fff (white)