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:
import VAvatar from 'UiKit/components/VAvatar/VAvatar.vue';
Example
Place the component in your template as follows:
<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
<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:
<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.