Ember Initials is a package for generating simple avatars with users initials. It supports Ember 2.8 (or higher) apps. Thanks to highly customizable interface you can define your own colors, defaults and styles. I promise you, it will do the job!
Demo App
Demo app with interactive examples you can find at http://exelord.github.io/ember-initials
Install
ember install ember-initials
Usage
Quick start
Ember Initials gives you a built-in component which you can use in yours templates:
It will generate an avatar with JD
initials.
Browser compatibility
This addon has been checked on:
- IE 10 and UP including EDGE
- Firefox 44 and UP
- Chrome 48 and UP
- Opera 35 and UP
Customization
You can pass options to the {{ember-initials}}
directive or extend your Component with a mixin:
import Initials from 'ember-initials/mixin';
export default Ember.Component.extend(Initials, {
// your extensions
});
Full list of options is available right in the code (mixin.js). If you read this probably you know what you are doing ;)
Examples
Bellow you can find some code examples with usage of available options.
Font customization
You can customize font by these arguments:
Size
To change the size of avatar add size
options (size in pixels):
Seed Text
Seed text is a background color id generated through uniq string. By default it is a name
.
Eg. It will return avatar with red
background.
Now it will return avatar with blue
background.
Default name and background color
To change the default name and background color of avatar add defaultName
and defaultBackground
options: