Skip to content

Instantly share code, notes, and snippets.

@iErik
Created July 15, 2020 14:37
Show Gist options
  • Save iErik/f2cf1815efa49774bdc561e033197d89 to your computer and use it in GitHub Desktop.
Save iErik/f2cf1815efa49774bdc561e033197d89 to your computer and use it in GitHub Desktop.
<template>
<div class="avatar-list" :style="rootStyle">
<f-avatar
v-for="(avatar, index) in displayAvatars"
:key="index"
:src="avatar.image || fallbackAvatar"
:size="avatarSize"
class="avatar-list__avatar"
/>
<div v-if="avatars.length > showLimit" class="avatar-list__remainingCount">
<span class="avatar-list__remainingCount--text">
{{ remainingAvatars }}
</span>
</div>
</div>
</template>
<script>
export default {
name: 'AvatarList',
props: {
avatars: {
type: Array,
required: true
},
showLimit: {
type: Number,
default: 4
},
avatarSize: {
type: Number,
default: 52
}
},
computed: {
displayAvatars() {
return this.avatars.slice(0, this.showLimit)
},
remainingAvatars() {
return `+${(this.avatars || []).length - this.showLimit}`
},
rootStyle() {
return { '--avatar-size': this.avatarSize }
},
fallbackAvatar() {
return require('@/assets/images/icons/Avatar-40px.svg')
}
}
}
</script>
<style lang="scss">
.avatar-list {
display: flex;
&__avatar {
&:not(:last-child) {
margin-left: -15px;
}
}
&__remainingCount {
display: flex;
align-items: center;
justify-content: center;
margin-left: -15px;
z-index: 10;
border-radius: 50%;
width: var(--avatar-size);
height: var(--avatar-size);
background-color: #efefef;
&--text {
color: var(--color-gray-600);
font-size: 14px;
}
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment