@vaadin-component-factory/vcf-avatar-item

<vcf-avatar-item>

Demo

https://vcf-avatar-item.netlify.com/

Installation

Install vcf-avatar-item:

npm i @vaadin-component-factory/vcf-avatar-item --save

Usage

Once installed, import it in your application:

import '@vaadin-component-factory/vcf-avatar-item';

And use it:

<vcf-avatar-item></vcf-avatar-item>

By default, an avatar icon is shown on the avatar component. There are three ways to change what is shown on the avatar.

• Provide a name attribute. An abbreviation will be created based on the provided name and will be shown instead of the avatar icon. E.g. Abbreviation for "John Doe" will be "JD".

<vcf-avatar-item name="John Doe"></vcf-avatar-item>

• Provide an abbr attribute. The provided abbreviation will be shown instead of the avatar icon.

<vcf-avatar-item abbr="ST"></vcf-avatar-item>

Providing abbr will override name attribute.

• Provide an image attribute. The provided image will be shown instead of the avatar icon. If provided, the name attribute will be used as alt attribute of the image.

<vcf-avatar-item image="https://randomuser.me/api/portraits/women/5.jpg" name="Jane Doe"></vcf-avatar-item>

Providing image will override both name and abbr attributes.

Running demo

• Fork the vcf-avatar-item repository and clone it locally.

• Make sure you have npm installed.

• When in the vcf-avatar-item directory, run npm install to install dependencies.

• Run npm start to open the demo.

Contributing

To contribute to the component, please read the guideline first.

License

Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.

Vaadin collects development time usage statistics to improve this product. For details and to opt-out, see https://github.com/vaadin/vaadin-usage-statistics.