Avatar

Avatar component

Install

$ npm install @poetadigital/vue-avatar --save

Getting Starting

How to use component

Parameters

| Props | 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 | fasle | 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()] | Function | Custom parser to manipulate the string (the parser takes 2 params: a String and the default parser). It must return a String.

Usage

<template>
  <div class="App">
    <PAvatar username="Poeta Digital" :size="100"/>
  </div>
</template>

<script>
import PAvatar from '@poetadigital/vue-avatar';

export default {
  components: { PAvatar }
};
</script>

<style></style>

License

MIT © Poeta Digital