Directory

← Back

paper-userpicture

Material Design User Avatar

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/petja/paper-userpicture on 2019-05-22 ]

Paper User Picture

Published on webcomponents.org

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

<paper-userpicture user-id="AAA" user-name="Petja"></paper-userpicture>
<paper-userpicture user-id="BBB" user-name="Oliver"></paper-userpicture>
<paper-userpicture user-id="CCC" user-name="Luke"></paper-userpicture>
<paper-userpicture user-id="DDD" user-name="Yusef"></paper-userpicture>

Show name under the picture

Add show-name attribute to show name of user under the picture

<paper-userpicture show-name user-id="EEE" user-name="Henry"></paper-userpicture>
<paper-userpicture show-name user-id="FFF" user-name="Thomas"></paper-userpicture>
<paper-userpicture show-name user-id="GGG" user-name="Michael"></paper-userpicture>
<paper-userpicture show-name user-id="HHH" user-name="Leo"></paper-userpicture>

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.

<paper-userpicture image="http://lorempixel.com/160/160?1" user-id="III" user-name="Henry"></paper-userpicture>
<paper-userpicture image="http://lorempixel.com/160/160?2" user-id="JJJ" user-name="Thomas"></paper-userpicture>
<paper-userpicture image="http://lorempixel.com/160/160?3" user-id="KKK" user-name="Michael"></paper-userpicture>
<paper-userpicture image="http://lorempixel.com/160/160?4" user-id="LLL" user-name="Leo"></paper-userpicture>

Compatibility

(Loading compatibility data...)

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#^1.4.0

  • petja/paper-avatar-behavior#^1.0.0
Released
2017-02-19
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 1.0+
Browser
Browser Independent

paper-userpicture - Vaadin Add-on Directory

Material Design User Avatar paper-userpicture - Vaadin Add-on Directory
**[ 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 ```
Online