SAvatar

<SAvatar> is a common avatar displaying component.

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

J

A

G

Usage

Import <SAvatar> component and pass in either the image or a name. When the image is passed, the image gets displayed, and when passing a name, the initial of the name will be used.

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

<template>
  <SAvatar avatar="/path/to/image.jpg" />
  <SAvatar name="John Doe" />
</template>

Props

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

:size

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

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

<SAvatar size="medium" image="/image.jpg" />

:avatar

The path to the image.

interface Props {
  avatar?: string | null
}

<SAvatar image="/image.jpg" />

:name

The name of the avatar user. The initial value of the name gets displayed. When avatar prop is set, this value gets ignored.

interface Props {
  name?: string | null
}

<SAvatar name="John Doe" />

:tooltip

When set to true, a tooltip showing the name will be displayed when hovering over the avatar. You can also pass an object to define the position of the tooltip.

interface Props {
  tooltip?: boolean | { position?: 'top' | 'right' | 'bottom' | 'left' }
}

<SAvatar tooltip name="John Doe" />