Avatar
Overview
The VAvatar
component provides a flexible and customizable avatar image element. It is built using the ShadCN Vue library and allows users to display an avatar with various sizes, shapes, and fallback content. The avatar can either be an image or a fallback icon.
This component consists of several subcomponents:
VAvatar
: The root container that wraps the avatar image or fallback.VAvatarImage
: The component that displays the avatar image.VAvatarFallback
: The fallback component displayed when the image is unavailable.shape.
The VAvatar
component is located in the path: ui-kit/src/components/Base/VAvatar
.
Usage
To include the Avatar Component in your Vue 3 project, import it like this:
vue
import VAvatar from 'UiKit/components/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
shape
(boolean, optional): Controls the shape of avatar. Available values are:square
circle
(default)