Avatar is an image defining identity for an app element.
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.
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>
As an end user, I want to be given a visual representation of certain image, initials or icon.
- Have avatar that shows image.
- Have avatar that shows initials as image.
- Have avatar that shows icon as image.
- The avatar must have a size (small, medium, large) changing the width/height of the component.
- The avatar must accept image href path for image representation.
- The avatar should have the ability to set initials color.
- The avatar should have the ability to set initials background color.
- The avatar should have the ability to set rounded shape.
End User Experience
The avatar should always display image, initials or icon.
initials: Set the initials that should be shown by the avatar.
roundShape: Change the type of the Avatar, by using roundShape the avatar will look like circle or square.
bgColor: Set the background corner of the initials or icon avatars.
color: Set the color of the initials or icon avatars.
icon: Set the icon of the avatar. Currently all icons from the material icon set are supported.
src: Set the image source of the avatar.
size: Set the size of the avatar to either small, medium or large.
The end user interface consists of:
Image, initials or icon representation of the avatar
In a circle or square shape.
With 3 different sizes (small, medium or large).
You should be able to configure the
igx-avatar by passing an Options object to it.
src- Set the image source of the avatar.
initials- Set the initials of the avatar.
icon- Set the icon of the avatar. Currently all icons from the material icon set are supported. Not applicable for initals and image avatars.
bgColor- Set the background color of initials or icon avatars.
color- Set the color of initilas or icon avatars. (optional)
roundShape- Set the shape of the avatar to circle. The default shape is square.
size- Set the size of the avatar to either small, medium or large.
- Methods Internal
generateInitials()- Create canvas element
isRounded()- Check the rounded property and return Boolean
- role="img". https://www.w3.org/TR/wai-aria/roles#img
- aria-label="avatar". https://www.w3.org/TR/wai-aria/states_and_properties#aria-label
- aria-roledescription="roleDescription". https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription