Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eliep/vue-avatar
An avatar component for vue.js
https://github.com/eliep/vue-avatar
Last synced: 3 days ago
JSON representation
An avatar component for vue.js
- Host: GitHub
- URL: https://github.com/eliep/vue-avatar
- Owner: eliep
- License: mit
- Created: 2016-05-01T17:35:13.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:42:19.000Z (about 2 years ago)
- Last Synced: 2025-01-31T20:54:09.522Z (10 days ago)
- Language: JavaScript
- Homepage: https://eliep.github.io/vue-avatar
- Size: 1.37 MB
- Stars: 620
- Watchers: 8
- Forks: 71
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-cn - vue-avatar
README
# vue-avatar
[](https://travis-ci.org/eliep/vue-avatar)
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](https://github.com/wbinnssmith/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](https://eliep.github.io/vue-avatar)
## 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
```js
import Avatar from 'vue-avatar'
export default {
...
components: {
Avatar
},
...
}
```
After that, you can use it in your templates:
```html
```
### CommonJS
```js
var Vue = require('vue')
var Avatar = require('vue-avatar')
var YourComponent = Vue.extend({
...
components: {
'avatar': Avatar.Avatar
},
...
})
```
### Browser
```
new Vue({
...
components: {
'avatar': VueAvatar.Avatar
},
...
})
```
## Props
NameRequiredDefaultTypeDescription
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
NameArgumentsDescription
@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.
## Build Setup
``` bash
# 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
``` bash
npm test
```
## License
Released under the [MIT](LICENSE) License.