vcf-avatar-group
Vaadin Component Factory Avatar Group
<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/vcf-avatar-group.js';
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.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/polymer#^3.0.0
- @vaadin-component-factory/vcf-avatar-item#^0.2.1
- @vaadin/vaadin-element-mixin#^2.1.3
- @vaadin/vaadin-lumo-styles#^1.5.0
- @vaadin/vaadin-themable-mixin#^1.4.4
- Released
- 2019-09-03
- Maturity
- IMPORTED
- License
- Other
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
vcf-avatar-group - Vaadin Add-on Directory
Vaadin Component Factory Avatar GroupView on NPM
Online Demo
View on GitHub
vcf-avatar-group version 0.1.0
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
* vcf-avatar-item#github:vaadin-component-factory/vcf-avatar-item#master
vcf-avatar-group version 0.1.1
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.1.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.1.2
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.1.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.1.3
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.1.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.1.4
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.1.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.2.0
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.2.1
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.2.2
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.2.3
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.2.4
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.2.5
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.2.6
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 0.2.7
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 1.0.0
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4
vcf-avatar-group version 1.0.1
### Dependencies
* @polymer/polymer#^3.0.0
* @vaadin-component-factory/vcf-avatar-item#^0.2.1
* @vaadin/vaadin-element-mixin#^2.1.3
* @vaadin/vaadin-lumo-styles#^1.5.0
* @vaadin/vaadin-themable-mixin#^1.4.4