Avatar specification

Avatar is an image defining identity for an app element.

Objectives

It is providing API for the most common use cases, leaving maximum flexibility in developer hands. It follows the mobile-first approach and should be suitable for hybrid applications.

User Stories

Developer

As a developer I want to be able to provide a way to display certain image, initials or icon as avatar. Using [ ] binding.

<igx-avatar initials="ZK" width="100" roundShape="true" bgColor="#ff6978">
</igx-avatar>

End user

As an end user, I want to be given a visual representation of certain image, initials or icon.

##Acceptance criteria

1. Have avatar that shows image.
2. Have avatar that shows initials as image.
3. Have avatar that shows icon as image.
4. The avatar must have a size (small, medium, large) changing the width/height of the component.
5. The avatar must accept image href path for image representation.
6. The avatar should have the ability to set initials color.
7. The avatar should have the ability to set initials background color.
8. The avatar should have the ability to set rounded shape.

Functionality

End User Experience

The avatar should always display image, initials or icon.

Developer Experience

roundShape: Change the type of the Avatar, by using roundShape the avatar will look like circle. value: Precise value between 0 and Max (maximum value that can be passed to progress bar.) bgColor: Set the background corner of the avatar. color: Set the color of the initials or icon. icon: Set the icon.

//TODO