MazAvatar

MazAvatar is a standalone component that displays an image or an icon with a caption. It can be used to display a user's profile picture, a placeholder image, or an icon.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

TIP

This component uses vLazyImg directive

Basic usage

<template>
  <MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
</template>

<script lang="ts" setup>
  import MazAvatar from 'maz-ui/components/MazAvatar'
</script>

Options

TIP

See all the options props here

LM

<template>
  <MazAvatar
    caption="Louis Mazel"
    size="1.5rem"
  />
  <MazAvatar
    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
    size="2rem"
    href="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
    target="_blank"
    rounded-size="none"
    clickable
    no-size
  >
    <template #icon>
      <MazIcon name="eye" />
    </template>
  </MazAvatar>
  <MazAvatar
    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=200"
    size="2.5rem"
    clickable
    rounded-size="xl"
    @click="clicked"
  />
  <MazAvatar
    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=600"
    size="3rem"
    bordered
  />
</template>

<script lang="ts" setup>
  import MazAvatar from 'maz-ui/components/MazAvatar'
  const clicked = () => { console.log('clicked') }
</script>

On Error

<MazAvatar @error="error" />

Fallback image loaded on error

<MazAvatar
  src="https://broken-link-image-src.com"
  fallback-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=100"
/>

Loading

The props loading has 3 possible values: intersecting, lazy, or eager.

By default, the value is intersecting which means the image will be loaded when it's intersecting with the IntersectionObserver browser API. This mode uses the MazLazyImg component with vLazyImg directive to handle the lazy loading.

Native modes:

• lazy: The image will be loaded only when it's in the viewport
• eager: The image will be loaded immediately

These modes are native use an HTMLImageElement with the loading attribute. (see MDN). Useful for SSR (Server Side Rendering) or when you want to load the image immediately.

<MazAvatar
  loading="intersecting"
  src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
/>
<MazAvatar
  loading="lazy"
  src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
/>
<MazAvatar
  loading="eager"
  src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
/>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
style	The style of the component	TSIndexedAccessType	-
class	The class of the component	TSIndexedAccessType	-
src	The source of the image	union	-	undefined
caption	The caption of the avatar	union	-	undefined
href	The link of the avatar	string	-	undefined
to	The link (router-link) of the avatar	union	-	undefined
alt	The alt of the image	string	-	'avatar image'
target	The target of the link	string	-	'_self'
size	The size of the avatar	string	-	undefined
bordered	Add a border to the avatar	boolean	-
clickable	Make the avatar clickable	boolean	-
square	Make the avatar square	boolean	-
noElevation	Remove the shadow	boolean	-
showCaption	Show the caption	boolean	-
imageHeightFull	Make the image height full	boolean	-
noLoader	Remove the loader	boolean	-
buttonColor	The color of the clickable button	Color	-	'info'
noClickableIcon	Remove the icon on hover when component is clickable	boolean	-
letterCount	Number of letters to display in the round text	number	-	undefined
roundedSize	Size of the rounded @values 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	union	-	'full'
fallbackSrc	The fallback src to replace the src on loading error	string	-	undefined
noPhoto	Load the fallback image by default	boolean	-
loading	The loading strategy of the image - lazy, eager or intersecting @default 'intersecting' @values 'lazy' | 'eager' | 'intersecting'	union	-	'intersecting'

Events

Event name	Properties	Description
click		Emitted when the avatar is clicked
error		Emitted when the image is in error
loaded		Emitted when the image is loaded
loading		Emitted when the image is loading
intersecting		Emitted when the image is intersecting

Slots

Name	Description	Bindings
round-text
icon
caption