Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
vue-avatar
Advanced tools
Avatar component for Vue.js
Weekly downloads
Readme
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="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
},
...
})
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.
FAQs
Avatar component for Vue.js
The npm package vue-avatar receives a total of 7,316 weekly downloads. As such, vue-avatar popularity was classified as popular.
We found that vue-avatar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.