Avatar

Used as an avatar, it can be displayed in the form of pictures, icons or characters.

Basic Usage

The basic use of avatars. If the avatar is text, the font size will be automatically adjusted to fit the avatar.

TuView

Size

The size of the avatar can be adjusted by setting the size field. The default size is 40px. Set the shape field, you can set whether the profile picture is a circle or a square.

Group

Use Avatar.Group to group a list of avatars. size can be used to specify the size of each avatar..

View

2..

Trigger Icon

You can customize the interactive button through trigger-icon and trigger-type. There are two types: mask and button.

<template>
  <tu-space size="large">
    <tu-avatar
      :trigger-icon-style="{ color: '#5e7ce0' }"
      :auto-fix-font-size="false"
      @click="toast"
    >
      A
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar :trigger-icon-style="{ color: '#5e7ce0' }" @click="toast">
      <tu-icon size="20">
        <UserFilled />
      </tu-icon>
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar
      shape="square"
      :trigger-icon-style="{ color: '#5e7ce0' }"
      @click="toast"
    >
      <tu-icon size="20">
        <UserFilled />
      </tu-icon>
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar trigger-type="mask">
      <img
        alt="avatar"
        src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
      />
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>
  </tu-space>
</template>

<script lang="ts" setup>
import { UserFilled, Edit } from '@tu-view-plus/icons-vue';
import { TuMessage } from 'tu-view-plus';

const toast = () => {
  TuMessage('Edit');
};
</script>

<template>
  <tu-space size="large">
    <tu-avatar
      :trigger-icon-style="{ color: '#5e7ce0' }"
      :auto-fix-font-size="false"
      @click="toast"
    >
      A
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar :trigger-icon-style="{ color: '#5e7ce0' }" @click="toast">
      <tu-icon size="20">
        <UserFilled />
      </tu-icon>
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar
      shape="square"
      :trigger-icon-style="{ color: '#5e7ce0' }"
      @click="toast"
    >
      <tu-icon size="20">
        <UserFilled />
      </tu-icon>
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>

    <tu-avatar trigger-type="mask">
      <img
        alt="avatar"
        src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
      />
      <template #trigger-icon>
        <tu-icon>
          <Edit />
        </tu-icon>
      </template>
    </tu-avatar>
  </tu-space>
</template>

<script lang="ts" setup>
import { UserFilled, Edit } from '@tu-view-plus/icons-vue';
import { TuMessage } from 'tu-view-plus';

const toast = () => {
  TuMessage('Edit');
};
</script>

Auto Fix Font Size

If the avatar content is text, the font size will be automatically adjusted to fit the content in the avatar.

Custom Avatar Path

Failed to load:

Effects

Card provide five different themes: outset、inset、bordered、outlined and flat. Using effect to change, default is outset.

Avatar API

Avatar Attributes

Name	Description	Type	Default
shape	The shape of the avatar, there are two kinds of circle (circle) and square (square)	`String`	circle
imageUrl	Custom avatar image address. If this attribute is passed in, the img tag will be rendered by default	`String`	-
size	The size of the avatar, the unit is px. Use size 40px in styles when not filled	`Number`	-
auto-fix-font-size	Whether to automatically adjust the font size according to the size of the avatar.	`Boolean`	true
triggerType	Clickable avatar interaction type	`String`	mask
trigger-icon-style	Interactive icon style	`CSSProperties`	-
effect	Effect	`String`	outset

Avatar Event

Name	Description	Type
click	Callback when clicked	`Function`
error	Image load error	-
load	Image load success	-

Avatar Slots

Name	Description
trigger-icon	Clickable avatar interaction icon

AvatarGroup API

AvatarGroup Attributes

Name	Description	Type	Default
shape	The shape of the avatar in the group, there are two kinds of circle (circle) and square (square)	`String`	circle
size	The size of the avatar in the group, the unit is px	`Number`	-
auto-fix-font-size	Whether to automatically adjust the font size according to the size of the avatar.	`Boolean`	true
max-count	The maximum number of avatars displayed in the avatar group. The excess avatars will be displayed in the form of +x.	`Number`	0
z-index-ascend	The avatar z-index in the avatar group increases, and the default is decreasing.	`Boolean`	false
max-style	Style for +x.	`CSSProperties`	-

Avatar ​

Basic Usage ​

Size ​

Group ​

Trigger Icon ​

Auto Fix Font Size ​

Custom Avatar Path ​

Effects ​

Avatar API ​

Avatar Attributes ​

Avatar Event ​

Avatar Slots ​

AvatarGroup API ​

AvatarGroup Attributes ​