TAvatar / 头像

Avatar for displaying user profile images with text fallback. Supports multiple sizes, shapes, color variants, and works with TAvatarList for stacking. / 头像用于展示用户头像，支持图片加载失败时降级显示文字、多种尺寸形状、颜色变体，可与 TAvatarList 配合实现头像堆叠。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
src	string	—	Image URL / 图片地址
alt	string	'Avatar'	Image alt text
size	'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'	'md'	Size
shape	'rounded' | 'square' | 'circle'	'rounded'	Shape
text	string	''	Fallback text (initials) / 降级文字
color	TablerColor	—	Background color

Slots / 插槽

Slot	Description / 说明
default	Custom avatar content / 自定义头像内容

Basic Usage / 基础用法

<script setup lang="ts">
import { TAvatar } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Image avatar / 图片头像 -->
  <TAvatar src="/path/to/avatar.jpg" alt="User" />

  <!-- Text fallback / 文字降级 -->
  <TAvatar text="张" color="blue" />
  <TAvatar text="李" color="green-lt" />

  <!-- Sizes / 尺寸 -->
  <TAvatar size="xs" text="XS" color="primary" />
  <TAvatar size="sm" text="SM" color="primary" />
  <TAvatar size="md" text="MD" color="primary" />
  <TAvatar size="lg" text="LG" color="primary" />
  <TAvatar size="xl" text="XL" color="primary" />
  <TAvatar size="2xl" text="2X" color="primary" />

  <!-- Shapes / 形状 -->
  <TAvatar shape="rounded" text="R" color="blue" />
  <TAvatar shape="square" text="S" color="green" />
  <TAvatar shape="circle" text="C" color="red" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TAvatar, TAvatarList } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Avatar list with stacking / 堆叠头像组 -->
  <TAvatarList :max="3">
    <TAvatar src="/users/1.jpg" />
    <TAvatar src="/users/2.jpg" />
    <TAvatar src="/users/3.jpg" />
    <TAvatar text="+2" color="primary" />
    <TAvatar src="/users/4.jpg" />
    <TAvatar src="/users/5.jpg" />
  </TAvatarList>

  <!-- Colors / 颜色 -->
  <div class="d-flex gap-1">
    <TAvatar text="A" color="blue" />
    <TAvatar text="B" color="green" />
    <TAvatar text="C" color="red" />
    <TAvatar text="D" color="purple" />
    <TAvatar text="E" color="orange" />
    <TAvatar text="F" color="cyan" />
  </div>
</template>

Tips / 避坑指南

• When src fails to load, falls back to text initials as a graceful degradation
• TAvatarList with max prop automatically truncates and shows a "+N" count avatar
• Text avatars without a color prop use Tabler's default background
• size="xxs" is the smallest (16px), size="2xl" is the largest (64px)
• shape="circle" renders a perfect circle; "rounded" has rounded corners; "square" has right angles