1.0.0 • Published 7 months ago
@craydel-v3/craydel-avatar-with-details v1.0.0
CraydelAvatarWithDetails
Installation
Get the latest version by NPM:
$ npm i @craydel-v3/craydel-avatar-with-detailsComponent 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="john.doe@gmail.com"
></craydel-avatar-with-details>1.0.0
7 months ago