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:

import VAvatar from 'UiKit/components/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
• shape (boolean, optional): Controls the shape of avatar. Available values are:
  • square
  • circle (default)

Examples

Shape

Sizes

With image