@vaadin-component-factory/vcf-avatar-group
v1.0.2
Published
Vaadin Component Factory Avatar Group
Downloads
20
Readme
<vcf-avatar-group>
Demo
https://vcf-avatar-group.netlify.com/
Installation
Install vcf-avatar-group
:
npm i @vaadin-component-factory/vcf-avatar-group --save
Usage
Once installed, import it in your application:
import '@vaadin-component-factory/vcf-avatar-group';
And use it:
<vcf-avatar-group></vcf-avatar-group>
const people = [
{ name: 'Dave' },
{ abbr: 'JD' },
{ name: 'Hannah' },
{ image: 'https://randomuser.me/api/portraits/women/5.jpg', name: 'Jane' }
];
const avatarGroup = document.querySelector('vcf-avatar-group');
avatarGroup.items = people;
For each item, you can provide a name
, abbr
, or image
. Please refer to vcf-avatar-item for more info.
You can set a max
attribute to limit how many avatar items are shown. By default, the limit is 4.
Running demo
Fork the
vcf-avatar-group
repository and clone it locally.Make sure you have npm installed.
When in the
vcf-avatar-group
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.