SAvatarStack

The SAvatarStack component is used to display a stack of avatars. It is useful when you want to display a list of users or avatars in a single component.

@globalbrain/sefirot/lib/components/SAvatarStack.vue

+2

Usage

Import <SAvatarStack> component and pass in an array of avatars.

<script setup lang="ts">
import SAvatarStack from '@globalbrain/sefirot/lib/components/SAvatarStack.vue'

const avatars = [
  { image: '/path/to/image-1.jpg' },
  { image: '/path/to/image-2.jpg' },
  { image: '/path/to/image-3.jpg' }
]
</script>

<template>
  <SAvatarStack :avatars="avatars" />
</template>

Props

Here are the list of props you may pass to the component.

:avatars

An array of avatars to display.

interface Props {
  avatars: { image?: string; name?: string }[]
}

<SAvatarStack
  :avatars="[
    { image: '/path/to/image-1.jpg' },
    { image: '/path/to/image-2.jpg' }
  ]"
/>

If you want to display initials instead of images, you can pass an array of objects with the name property.

<SAvatarStack
  :avatars="[
    { name: 'Jane Doe' },
    { name: 'Richard Roe' }
  ]"
/>

:size

Defines the size of the component. The default is medium.

interface Props {
  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
}

<SAvatarStack
  size="medium"
  :avatars="[
    { image: '/path/to/image-1.jpg' },
    { image: '/path/to/image-2.jpg' }
  ]"
/>

:avatar-count

The maximum number of avatars to display. The default is 2. Set to 0 to display all avatars. If the number of avatars is greater than the avatar-count, the component will display the number of avatars and a +X label where X is the number of avatars that are not displayed.

interface Props {
  avatarCount?: number
}

<SAvatarStack
  :avatar-count="2"
  :avatars="[
    { image: '/path/to/image-1.jpg' },
    { image: '/path/to/image-2.jpg' }
  ]"
/>