Skip to content
/ k-avatar Public

Simple component to make Gmail like text avatars for profile pictures. These avatars can be scaled up to any size.

License

Notifications You must be signed in to change notification settings

k4ng/k-avatar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

74 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

bower version open issues npm Published on webcomponents.org

<k-avatar>

Simple component to make Gmail like text avatars for profile pictures. These avatars can be scaled up to any size. view demo

<k-avatar 
    data-name           = "Kang cahya"
    data-height         = "100"
    data-width          = "100"
    data-char-alias     = "2"
    data-text-color     = "#FFFFFF"
    data-border-radius  = "10"
    data-font-size      = "40"
    data-font-weight    = "500"></k-avatar> 
    <p><strong>Kang cahya</strong></p>

How to install

bower

bower install --save k-avatar

npm

npm install k-avatar

Properties

Data Attribute Description Default Value
data-name Name of the user which the profile picture should be generated. K4ng
data-height Height of the picture. 48 (pixel)
data-width Width of the picture. 48 (pixel)
data-char-alias Number of characherts to be shown in the picture. 1
data-text-color Color of the text. #FFFFFF (white)
data-font-size Font size of the character(s). 20 (pixel)
data-font-weight Font weight of the character(s). 400
data-border-radius Set border-radius container. 0 (%)
data-box-shadow set box-shadow container. 0px 0px 0px 0px rgba(33,33,33,0.75)
data-text-shadow set text-shadow character. 0px 0px 0px rgba(33,33,33,0.75)

Change log

You can find a list of all changes for each release in the change log.

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT License