paper-userpicture
Material Design User Avatar
[ This description is mirrored from README.md at github.com/petja/paper-userpicture on 2019-05-22 ]
Paper User Picture
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>
Links
Compatibility
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