@amaury-tobias/v-avatar
v2.0.3
Published
Componente de avatar basado en Vue.js
Downloads
1,080
Maintainers
amaury-tobiasReadme
v-avatar
Componente de Avatar para Vue.js
Este componente esta altamente inspirado y basado en el trabajo de https://github.com/eliep/vue-avatar, para recuperar y mantener un componente de mucha utilidad, agradecimientos totales.
Para el uso del componente es necesario:
- Dividir el username con espacios y guiones.
- Utiliza la primer letra de cada palabra del nombre.
- Utiliza hasta un maximo de tres letras iniciales.
- Si el nombre esta dividido en mas de tres partes y alguna de esta comienza con mayuscula, saltara aquellas que comienzen en minuscula.
Puedes encontrar algunos ejemplos aquí.
Instalación
npm install @amaury-tobias/v-avatar
Uso
v-avatar es un modulo UMD, por lo que puede ser utilizado en tanto en una instancia de Vue como en Nuxt como en un entorno non-modular donde vAvatar sera registrada como variable global.
VUE COMPONENT
<template>
<div>
<v-avatar username='John Doe' />
</div>
</template>
<script>
import { vAvatar } from '@amaury-tobias/v-avatar'
export default {
components: {
vAvatar
}
}
</script>OR GLOBAL
import Vue from 'vue'
import vAvatar from '@amaury-tobias/v-avatar'
Vue.use(vAvatar)NUXT
./plugins/vAvatar.js
import Vue from 'vue'
import vAvatar from '@amaury-tobias/v-avatar'
Vue.use(vAvatar)nuxt.config.js
module.exports = {
plugins: ['~/plugins/vAvatar.js']
}*.vue <template>
<v-avatar username="John Doe" />Browser
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@amaury-tobias/v-avatar"></script>
</head>
<body>
<div id="app">
<v-avatar username="Jon Doe"></v-avatar>
</div>
<script>
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>Props
| Name | Required | Type | Default | | --------------- | :------: | :-----: | :-----: | | username | x | String | 'V-A' | | initials | x | String | - | | inline | x | Boolean | false | | src | x | String | - | | :customStyle | x | Object | - | | backgroundColor | x | String | - | | color | x | String | - | | :lighten | x | Number | 80 | | :size | x | Number | 50 | | :rounded | x | Boolean | false |
Build Setup
# install dependencies
npm install
# serve whith hot reload al localhost:8080
npm run serve
# build
npm run buildTest
npm testLicense
Released under the MIT License.