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-avatar attributes></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.

Value|Size (px)|Note ------------------|:----------:|-------------------------------------------------------------------- size=”small”|24px| size=”medium”|48px|Default if no value provided size=”large”|72px| size=”x-large”|96px| size=”ion-small”|18px|Designed to size with a small Ionic Icon <ion-icon size=”small”> size=”ion-medium”|24px|Designed to size with a medium Ionic Icon <ion-icon size=”medium”> size=”ion-large”|32px|Designed to size with a large Ionic Icon <ion-icon size=”large”>

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)