@craydel-v3/craydel-avatar-group
v1.0.1
Published
A custom Vuetify avatar group of users component for Craydel.
Downloads
3
Maintainers
Readme
CraydelAvatarGroup
Installation
Get the latest version by NPM:
$ npm i @craydel-v3/craydel-avatar-group
Component 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: "[email protected]",
photo: '',
acronym: "JS"
},
{
display_name: "Frankie Dowle",
text: "[email protected]",
photo: "https://randomuser.me/api/portraits/med/men/3.jpg",
acronym: "FD"
}
],
}
}