paper-userpicture - Vaadin Add-on Directory
Material Design User Avatar
**[ This description is mirrored from README.md at [github.com/petja/paper-userpicture](https://github.com//petja/paper-userpicture/blob/v1.0.0/README.md) on 2019-05-22 ]**
# Paper User Picture
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/petja/paper-userpicture)
`paper-userpicture` lets you create user avatars. If user doesn't have picture set, we'll automatically create placeholder containing user name initials.
## Styling
Custom property | Description | Default
----------------|-------------|----------
`--paper-userpicture-size` | The size of picture | `5em`
`--paper-userpicture-text-size` | The font-size of the placeholder initials | `calc(var(--paper-userpicture-size) / 2)`
## Demos
### Basic example
You only need `user-id` and `user-name` attributes defined
```html
```
### Show name under the picture
Add `show-name` attribute to show name of user under the picture
```html
```
### Use real user picture
And of course, if user has its picture set, you can show it by using `image` attribute as the reference to the URL.
```html
```
LicenseGitHub Homepage
Issue tracker
View on GitHub
paper-userpicture version 1.0.0
### Dependencies
Polymer/polymer#^1.4.0
* petja/paper-avatar-behavior#^1.0.0