MazAvatar

MazAvatar is a standalone component to display images or svgs in a wrapper

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

vue

<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

vue

<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

html

<MazAvatar @error="error" />

Fallback image loaded on error

html

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

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
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	-

Events

Event name	Properties	Description
click
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

MazAvatar ​

Basic usage ​

Options ​

On Error ​

Fallback image loaded on error ​

Props, Event & Slots ​

Props ​

Events ​

Slots ​