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="[email protected]"
></craydel-avatar-with-details>