Sefirot

Appearance

SAvatarStack ​

<SAvatarStack> 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.

vue
<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 />
</template>

Props ​

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

:avatars ​

An array of avatars to display.

ts
interface Props {
  avatars: { image?: string; name?: string }[]
}
template
<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.

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

:size ​

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

ts
interface Props {
  size?: 'nano' | 'mini' | 'small' | 'medium' | 'large' | 'jumbo'
}
template
<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.

ts
interface Props {
  avatarCount?: number
}
template
<SAvatarStack
  :avatar-count="2"
  :avatars="[
    { image: '/path/to/image-1.jpg' },
    { image: '/path/to/image-2.jpg' }
  ]"
/>

:tooltip ​

When set to true, a tooltip showing the name will be displayed when hovering over an avatar. The default position of the tooltip is 'top'. You can pass an object to control the positioning of the tooltip.

ts
interface Props {
  tooltip?: boolean | { position?: 'top' | 'right' | 'bottom' | 'left' }
}
template
<SAvatarStack
  tooltip
  :avatars="[
    { image: '/path/to/image-1.jpg', name: 'Jane Doe' },
    { image: '/path/to/image-2.jpg', name: 'Richard Roe' }
  ]"
/>