LetterAvatar
Fork me on GitHub

ionic-letter-avatar!

directive for the letter avatar for the given string like gmail, first letter of the given data will be the avatar

Download

<ion-list> 
   <ion-item>
     <div style="float:left;padding-right: 10px;">
      <ionic-letter-avatar data="Ganesh"></ionic-letter-avatar>
      </div>
      <div>
         <h2>Ganesh</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit mi, varius in blandit sit amet, tempus non risus. Maecenas risus urna, auctor ac laoreet sit amet, placerat non dolor.</p>
        </div>
    </ion-item>
    <ion-item >
      <div style="float:left;padding-right: 10px;">
         <ionic-letter-avatar data="Uttesh" charcount="2"></ionic-letter-avatar>
      </div>
      <div>
       <h2>Uttesh kumar </h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit mi, varius in blandit sit amet, tempus non risus. Maecenas risus urna, auctor ac laoreet sit amet, placerat non dolor.</p>
        </div>
   </ion-item>
</ion-list>

Default shape

avatar border styles

avatarborder="true" :

avatarcustomborder="border:5px solid black" :

Numbers

Special characters

Chinese

ಕನ್ನಡ ಅಕ್ಷರಮಾಲೆ

Round shape

Numbers

Special characters

avatar border styles

avatarborder="true" :

avatarcustomborder="border:5px solid black" :

Chinese

ಕನ್ನಡ ಅಕ್ಷರಮಾಲೆ

Chinese

Quick start

bower install ionic-letter-avatar

or alternatively download and include `ionic-letteravatar.js` after `angular.min.js`.
Add the `ionic-letter-avatar` module as a dependency when creating your app, e.g. 

var app = angular.module('myApp', ['ionic-letter-avatar']);`

<ionic-letter-avatar data="uttesh"></ionic-letter-avatar>


 result : 

<ionic-letter-avatar data="uttesh"shape="round"></ionic-letter-avatar>


 result : 

<ionic-letter-avatar data="uttesh" avatarborder="true" shape="round"></ionic-letter-avatar>


 result :
attribute table
Attribute Default Description
charcount 1 Specifies the number letters to displayed.
data input data
height 50 set the height for the avatar all values in pixel only, dont append "px"
width 50 set the width for the avatar all values in pixel only, dont append "px"
fontweight 400 set the font weight for the avatar
fontsize 30 set the font size for the letter all values in pixel only, dont append "px"
shape square set the shape for the avatar. set 'round' for rounded avatars
fontfamily HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif set the font Family of the avatar.
avatarborder false set the avatarborder to 'true' for the white border to avatar.
avatarcustomborder no default value using this attribute set the custom style to avatar borders i.e "border:5px solid black"