1.0.1 • Published 7 months ago
@craydel-v3/craydel-avatar-group v1.0.1
CraydelAvatarGroup
Installation
Get the latest version by NPM:
$ npm i @craydel-v3/craydel-avatar-groupComponent Import
Import the module chosen directly in your component
<script>
import CraydelAvatarGroup from "@craydel-v3/craydel-avatar-group/src/CraydelAvatarGroup.vue";
export default {
components: {CraydelAvatarGroup}
}
</script>Props
| Name | Type | Default | Description |
|---|---|---|---|
| avatar-size | number | string | 40 | Sets the height and width of the grouped avatars. |
| users | array | [] | Array of objects for each user. Will look for a display_name, text, photo and acronym keys. In case there is no photo url provided, the acronym will be used to display the initials. |
Usage
An example showing an avatar group of users.
<craydel-avatar-group
:users="users"
></craydel-avatar-group>data() {
return {
users: [
{
display_name: "John Smitt",
text: "john.smitt@craydel.com",
photo: '',
acronym: "JS"
},
{
display_name: "Frankie Dowle",
text: "frankie.dowle@craydel.com",
photo: "https://randomuser.me/api/portraits/med/men/3.jpg",
acronym: "FD"
}
],
}
}