https://github.com/vaadin-component-factory/vcf-avatar-item
Vaadin Component Factory Avatar Item.
https://github.com/vaadin-component-factory/vcf-avatar-item
avatar-component polymer3 vaadin webcomponent
Last synced: about 2 months ago
JSON representation
Vaadin Component Factory Avatar Item.
- Host: GitHub
- URL: https://github.com/vaadin-component-factory/vcf-avatar-item
- Owner: vaadin-component-factory
- License: other
- Created: 2019-07-02T11:10:17.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-07T19:20:31.000Z (over 5 years ago)
- Last Synced: 2025-03-10T03:55:05.334Z (2 months ago)
- Topics: avatar-component, polymer3, vaadin, webcomponent
- Language: JavaScript
- Homepage: https://vcf-avatar-item.netlify.com/
- Size: 62.5 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# <vcf-avatar-item>
## Demo
https://vcf-avatar-item.netlify.com/
## Installation
Install `vcf-avatar-item`:
```sh
npm i @vaadin-component-factory/vcf-avatar-item --save
```
## Usage
Once installed, import it in your application:
```js
import '@vaadin-component-factory/vcf-avatar-item';
```
And use it:
```html
```
By default, an avatar icon is shown on the avatar component. There are three ways to change what is shown on the avatar.
1. 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".
```html
```
2. Provide an `abbr` attribute. The provided abbreviation will be shown instead of the avatar icon.
```html
```
*Providing `abbr` will override `name` attribute.*
3. Provide an `image` attribute. The provided image will be shown instead of the avatar icon. If provided, the `name` attribute will be used as `alt` attribute of the image.
```html
```
*Providing `image` will override both `name` and `abbr` attributes.*
## Running demo
1. Fork the `vcf-avatar-item` repository and clone it locally.
1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. When in the `vcf-avatar-item` 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.