An avatar component for vue.js.
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:
You can find a few examples and the documentation here
npm install vue-avatar
Vuejs version | vue-avatar version |
---|---|
^1.0.18 | ^1.3.0 |
^2.0.0 | ^2.0.0 |
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.
import Avatar from 'vue-avatar'
export default {
...
components: {
Avatar
},
...
}
After that, you can use it in your templates:
<avatar username="Jane Doe"></avatar>
var Vue = require('vue')
var Avatar = require('vue-avatar')
var YourComponent = Vue.extend({
...
components: {
'avatar': Avatar.Avatar
},
...
})
<script src="https://github.com/eliep/vue-avatar/raw/master/path/to/vue/vue.min.js"></script>
<script src="https://github.com/eliep/vue-avatar/raw/master/path/to/vue-avatar/dist/vue-avatar.min.js"></script>
new Vue({
...
components: {
'avatar': VueAvatar.Avatar
},
...
})
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. |
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. |
# install dependencies
npm install
# serve gh pages with hot reload at localhost:8080/gh-pages/index.html
npm run dev
# build
npm run bundle
npm test
Released under the MIT License.