wt-avatar.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
src		String	-	Avatar pic. IMPORTANT: if this pic is stored locally in project, pass to this prop only pic, imported and passed to data as property
size		String	'md'	Avatar size
badge		Boolean	false	Draw status badge
username		String	-	If passed, avatar is letter-based (if not passed src)
status		String<AbstractUserStatus>	AbstractUserStatus.OFFLINE	Color of the badge
shape		String	'circle'	Shape of the element.
bot		boolean	false

Example Avatar Letters

AB

CD

EF

GH

IJ

KL

MN

OP

Code

<script setup>
const sizes = [{ size: '2xs', letter: 'A B' }, { size: 'xs', letter: 'C D' }, { size: 'sm', letter: 'E F' }, { size: 'md', letter: 'G H' }, { size: 'lg', letter: 'I J' }, { size: 'xl', letter: 'K L' }, { size: '2xl', letter: 'M N' }, { size: '3xl', letter: 'O P' }];
</script>

<template>
  <div style="display: flex; gap: 8px">
    <wt-avatar
      v-for="item in sizes"
      :key="item.size"
      :size="item.size"
      :username="item.letter"
    />
  </div>
</template>

<style scoped lang="scss"></style>

Example Avatar With Status

Code

<script setup>
import { AbstractUserStatus } from '@webitel/ui-sdk/enums';
import pic from './pic.jpg';
</script>

<template>
  <div style="display: flex; gap: 10px">
    <wt-avatar
      v-for="status in Object.values(AbstractUserStatus)"
      :key="status"
      :status="status"
      :src="pic"
      size="lg"
      badge
    />
  </div>
</template>

<style scoped lang="scss"></style>