vue-avatar
An avatar component for vue.js. avatar initials maximum length 2
This component display an avatar image and if none is provided fallback to the user initials. This component is highly inspired from react-user-avatar.
Rules used to compute user initials:
- divide the username on space and hyphen
- use the first letter of each parts
- never use more than three letters as initials
- if the username is divided in more than three parts and has part starting with an uppercase, skip parts starting with a lowercase.
You can find a few examples and the documentation here
Installation
npm install vue-avatar
Version
Vuejs version | vue-avatar version |
---|---|
^1.0.18 | ^1.3.0 |
^2.0.0 | ^2.0.0 |
Usage
vue-avatar is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, Avatar will be registered as a global variable.
ES6
import Avatar from 'vue-avatar'
export default {
...
components: {
Avatar
},
...
}
After that, you can use it in your templates:
<avatar username="Jane Doe"></avatar>
CommonJS
var Vue = require('vue')
var Avatar = require('vue-avatar')
var YourComponent = Vue.extend({
...
components: {
'avatar': Avatar.Avatar
},
...
})
Browser
<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-avatar/dist/vue-avatar.min.js"></script>
new Vue({
...
components: {
'avatar': VueAvatar.Avatar
},
...
})
Props
Name | Required | Default | Type | Description |
---|---|---|---|---|
username | N | - | String | The user name that will be used to compute user initial. |
initials | N | - | String | Force the displayed initials by overriding the computed ones. |
inline | N | false | Boolean | Uses inline-flex instead of flex |
src | N | - | String | Path to the avatar image to display. |
:customStyle | N | - | Object | A custom style object to override the base styles. |
backgroundColor | N | - | String | The avatar background color to use if no image is provided. If none is specified, a background color will be picked depending on the user name length. |
color | N | - | String | The font color used to render the user initials. If none is provided, the background color is used to compute the font color. |
:lighten | N | 80 | Number | A factor by which the background color must be lightened to produce the font color. Number between [-100,100]. |
:size | N | 50 | Number | The avatar size in pixel. |
:rounded | N | true | Boolean | True if the avatar must be rounded. |
:parser | N | [getInitials()](https://github.com/eliep/vue-avatar/blob/master/src/Avatar.vue#L8-L27) | Function | Custom parser to manipulate the string (the parser takes 2 params: a String and the default parser). It must return a String. |
Event
Name | Arguments | Description |
---|---|---|
@avatar-initials | username (the value of the username props), initials (the value of the computed initials or the initials props if any) | This event is trigger when the component is ready with component username and initial. avatar initials maximum length 2 |
Build Setup
# install dependencies
npm install
# serve gh pages with hot reload at localhost:8080/gh-pages/index.html
npm run dev
# build
npm run bundle
Test
npm test
License
Released under the MIT License.