ember-initials
v4.0.1
Published
Simple Initials Avatars for Ember applications
Downloads
7,192
Maintainers
Readme
Ember Initials is a package for generating simple avatars using users initials, images, gravatars or adorables. It definitely supports Ember 3.16 (or higher). Thanks to highly customizable interface you can define defaults and even set fallbacks.
Demo App with code generators
Demo app with interactive examples you can find at http://exelord.github.io/ember-initials
Compatibility
- Ember.js v3.16 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
This addon has been tested on:
- IE 10 and UP including EDGE
- Firefox 44 and UP
- Chrome 48 and UP
- Opera 35 and UP
Install
ember install ember-initials
Quick start
Ember Initials gives you a built-in components which you can use in yours templates:
Initials avatars:
<EmberInitials @name="John Doe" />
or
<EmberInitials::Initials @name="John Doe" />
Image avatars:
<EmberInitials::Image @image="/url/to/avatar.png" />
Gravatar avatars:
<EmberInitials::Gravatar @email="[email protected]" />
Adorables avatars:
<EmberInitials::Adorable @email="[email protected]" />
Examples, configuration and code generator are available on Project Site.
API Documentation
EmberInitials
<EmberInitials
@image="images/user.jpg"
@name="Ember Initials"
@defaultName="?"
@seedText="Ember Initials"
@textColor="white"
@fontSize=55
@fontWeight=100
@fontFamily="Helvetica Neue Light, Arial, sans-serif"
@size=200
/>
image
- image url | if image will be not found the initials avatars will be usedname
- name of user to generate initialsdefaultName
- ifname
will be not passed this name will be usedseedText
- uniq string which will be used to generate background color, eg. user's emailtextColor
- color of the text (initials) | hash or namefontSize
- font size inpx
fontWeight
- font weight inpx
fontFamily
- names of fonts with fallbacks | at this time only system fonts can be usedsize
- size of the avatar in pixels (setnull
if you do not want to use elements attributes likewidth
andheight
)
EmberInitials::Image
<EmberInitials::Image
@image="images/user.jpg"
@size=200
@defaultImage="images/default.jpg"
/>
image
- image url | if image will be not found thedefaultImage
will be useddefaultImage
- default image urlsize
- size of the avatar in pixels (setnull
if you do not want to use elements attributes likewidth
andheight
)
EmberInitials::Gravatar
<EmberInitials::Gravatar
@image="images/user.jpg"
@email="[email protected]"
@defaultImage="images/default.jpg"
@relativeUrl="true"
@size=200
/>
image
- image url | if image will be not passed the avatar will be generated form email thanks to gravataremail
- Email which will be used to fetching the gravatardefaultImage
- image src (relative or absolute URL depends onrelativeUrl
option) | if gravatar will not be found this image will be usedrelativeUrl
-true
orfalse
| decide whichdefaultImage
url do you want to use - relative or absolutesize
- size of the avatar in pixels (setnull
if you do not want to use elements attributes likewidth
andheight
)
EmberInitials::Adorable
<EmberInitials::Adorable
@image="images/user.jpg"
@email="[email protected]"
@size=50
/>
image
- image url | if image will be not found the avatar will be generated form email thanks to adorableemail
- Email which will be used to generating unique adorable avatarsize
- size of the avatar in pixels (setnull
if you do not want to use elements attributes likewidth
andheight
)