<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, thename
attribute will be used asalt
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, runnpm 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.