https://github.com/vaadin-component-factory/vcf-avatar-group
Vaadin Component Factory Avatar Group
https://github.com/vaadin-component-factory/vcf-avatar-group
avatar-group polymer3 vaadin webcomponent
Last synced: about 2 months ago
JSON representation
Vaadin Component Factory Avatar Group
- Host: GitHub
- URL: https://github.com/vaadin-component-factory/vcf-avatar-group
- Owner: vaadin-component-factory
- License: other
- Created: 2019-07-10T08:26:24.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-09-04T10:48:01.000Z (over 5 years ago)
- Last Synced: 2025-03-12T05:17:43.452Z (2 months ago)
- Topics: avatar-group, polymer3, vaadin, webcomponent
- Language: JavaScript
- Homepage: https://vcf-avatar-group.netlify.com/
- Size: 44.9 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <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';
```
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.