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 an image or a name. When an 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 of the name is displayed. If :avatar is provided, it will take precedence over this value.

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 an avatar. The default position of the tooltip is 'top'. You can pass an object to control the positioning of the tooltip.

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

<SAvatar tooltip name="John Doe" />