@craydel-v3/craydel-avatar-with-details

CraydelAvatarWithDetails

Installation

Get the latest version by NPM:

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

Component Import

Import the module chosen directly in your component

<script>
  import CraydelAvatarWithDetails from "@craydel-v3/craydel-avatar-with-details/src/CraydelAvatarWithDetails.vue";

  export default {
  components: {CraydelAvatarWithDetails}
}
</script>

Props

Name	Type	Default	Description
photo	string	undefined	Sets the avatar as an image.
display-name	string	undefined	Generates a random color that is applied to the avatar based on the display-name. This also sets the title of the avatar as part of the details.
acronym	string	undefined	Sets the avatar as an acronym.
text	string	undefined	Sets the text for the avatar as part of the details.
avatar-size	number | string	40	Sets the height and width of the avatar.
clickable	boolean	false	If set, the component will be rendered as clickable that has @click handler.
dense	boolean	false	Reduces the height of the component.

 

Events

Name	Description
click	Event that is emitted when the component is clicked.

 

Usage

An example showing an avatar that will display the name, initials and an email address.

<craydel-avatar-with-details
        display-name="John Doe"
        acronym="JD"
        text="[e-mail]"
></craydel-avatar-with-details>