New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@amaury-tobias/v-avatar

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@amaury-tobias/v-avatar

Componente de avatar basado en Vue.js

2.0.3
latest
Source
npm

Version published: 5 years ago

Weekly downloads: 12; decreased by-90.24%

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

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 build

Test

npm test

License

Released under the MIT License.

Keywords

FAQs

What is @amaury-tobias/v-avatar?

Is @amaury-tobias/v-avatar popular?

Is @amaury-tobias/v-avatar well maintained?

Package last updated on 13 Dec 2019

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.

Install