vcf-avatar-group - Vaadin Add-on Directory

Vaadin Component Factory Avatar Group

# <vcf-avatar-group> ## Demo https://vcf-avatar-group.netlify.com/ ## Installation Install `vcf-avatar-group`: ```sh npm i @vaadin-component-factory/vcf-avatar-group --save ``` ## Usage Once installed, import it in your application: ```js import '@vaadin-component-factory/vcf-avatar-group/vcf-avatar-group.js'; ``` And use it: ```html ``` ```javascript 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](https://github.com/vaadin-component-factory/vcf-avatar-item#usage) 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 1. Fork the `vcf-avatar-group` repository and clone it locally. 1. Make sure you have [npm](https://www.npmjs.com/) installed. 1. When in the `vcf-avatar-group` directory, run `npm install` to install dependencies. 1. Run `npm start` to open the demo. ## Contributing To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) 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.

License
View 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