1.0.2 • Published 2 years ago

@craydel/craydel-avatar-with-details v1.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

CraydelAvatarWithDetails

Installation

Get the latest version by NPM:

$ npm i @craydel/craydel-avatar-with-details

Register Plugin

If you use the plugin API, the component will be registered as a global component just like when including it with the script tag, but you won't need to re-register it through the components property in your own components.

Create the plugin file e.g craydel-components.js file.

// craydel-components.js
import Vue from 'vue'
import CraydelAvatarWithDetails from '@craydel/craydel-avatar-with-details/src/CraydelAvatarWithDetails.vue'

const Components = {
  CraydelAvatarWithDetails,
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

Next reference the plugin file in your nuxt.config.js

// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
  '~/plugins/craydel-components.js'
]

Props

NameTypeDefaultDescription
photostringundefinedSets the avatar as an image.
display-namestringundefinedGenerates a random color that is applied to the avatar based on the display-name.
acronymstringundefinedSets the avatar as an acronym.
emailstringundefinedSets the email for the avatar. Note: this text could be anything. Not necessarily an email address.
sizenumber | string40Sets the height and width of the component.
clickablebooleanfalseIf set, the component will be rendered as clickable that has @click handler.
onobjectundefinedUsed for binding to an activator.

Events

NameDescription
clickEvent that is emitted when the component is clicked.

Usage

An example showing an avatar that will display the initials 'JD', the name 'John Doe' and an email address 'john.doe@gmail.com'.

<craydel-avatar-with-details
        display-name="John Doe"
        acronym="JD"
        email="john.doe@gmail.com"
></craydel-avatar-with-details>