Avatar

Overview

The Avatar Component provides a flexible way to display user avatars in your Vue 3 application. It supports displaying an image, customizable sizes, and an option to show a short title based on the provided name. You can also choose to display the avatar with a rounded appearance.

Basic Usage

To include the Avatar Component in your Vue 3 project, import it like this:

vue

import VAvatar from 'UiKit/components/VAvatar/VAvatar.vue';

Example

Place the component in your template as follows:

vue

<VAvatar
  title="John Doe"
  src="path/to/image.jpg"
  size="large"
  round
/>

Props

The Avatar Component accepts the following props:

title (string, required): The text used to generate initials if no image is provided.
src (string, optional): The URL or path to the image to display. If omitted, initials based on the title are shown.
size (string, optional): Controls the size of the avatar. Available values are:
- large
- medium (default)
- small
- x-small
round (boolean, optional): If true, the avatar will have a fully rounded appearance.

Dynamic Initials

If no image is provided, the avatar displays initials generated from the title. The logic is as follows:

For a single word title, the first letter is displayed.
For multiple words, the first letter of the first and last words are displayed.

Example with Initials

vue

<VAvatar
  title="John Doe"
  size="medium"
/>

In this example, the avatar will display the initials "JD".

Slots

The Avatar Component does not have named slots, but it supports customization through its props and SASS variables.

Custom Styling

The component’s specific styles for different states and sizes are located in ui-kit/src/components/VAvatar/index.sass.

Complete Example

Here’s a complete example including dynamic initials and rounded styling:

vue

<script setup lang="ts">
import VAvatar from 'UiKit/components/VAvatar/VAvatar.vue';
</script>

<template>
  <VAvatar
    title="Jane Smith"
    round
    size="small"
  />
</template>

In this example, the avatar will display the initials "JS" in a small, rounded style.