ChuFix UI v0.11.0
Preview Updated 2026-05-10

Avatar

Avatar with three-stage fallback (image → initials → icon), 5 sizes, circle/square shapes, and AvatarGroup overlap.

Basic usage

Priority order: a successfully loaded src shows the image; on failure or if no src is provided, fallback / name initials are shown; otherwise a ? placeholder.

背景 视口
头像CQAL?
src/App.vue 
<script setup lang="ts">
import { CfAvatar } from '@chufix-design/vue';

const avatarSrc = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2220%22 fill=%22%23dbeafe%22/%3E%3Ccircle cx=%2240%22 cy=%2232%22 r=%2214%22 fill=%22%232563eb%22/%3E%3Cpath d=%22M16 70c4-18 16-27 24-27s20 9 24 27%22 fill=%22%2360a5fa%22/%3E%3C/svg%3E';
</script>
<template>
  <div class="demo-row">
    <CfAvatar :src="avatarSrc" alt="头像" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="Anna Lee" />
    <CfAvatar fallback="?" />
  </div>
</template>
<script setup>
import { CfAvatar } from '@chufix-design/vue';

const avatarSrc = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2220%22 fill=%22%23dbeafe%22/%3E%3Ccircle cx=%2240%22 cy=%2232%22 r=%2214%22 fill=%22%232563eb%22/%3E%3Cpath d=%22M16 70c4-18 16-27 24-27s20 9 24 27%22 fill=%22%2360a5fa%22/%3E%3C/svg%3E';
</script>
<template>
  <div class="demo-row">
    <CfAvatar :src="avatarSrc" alt="头像" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="Anna Lee" />
    <CfAvatar fallback="?" />
  </div>
</template>
import { CfAvatar } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfAvatar src="https://i.pravatar.cc/80?img=12" alt="Avatar" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="Anna Lee" />
    <CfAvatar fallback="?" />
  </>
);
}
import { CfAvatar } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfAvatar src="https://i.pravatar.cc/80?img=12" alt="Avatar" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="Anna Lee" />
    <CfAvatar fallback="?" />
  </>
);
}

Size and shape

Five sizes (xs / sm / md / lg / xl) and two shapes (circle / square).

背景 视口
CQCQCQCQCQ
BSBS
src/App.vue 
<script setup lang="ts">
import { CfAvatar } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row" style="align-items: flex-end;">
      <CfAvatar size="xs" name="Chen Qi" />
      <CfAvatar size="sm" name="Chen Qi" />
      <CfAvatar size="md" name="Chen Qi" />
      <CfAvatar size="lg" name="Chen Qi" />
      <CfAvatar size="xl" name="Chen Qi" />
    </div>
    <div class="demo-row">
      <CfAvatar shape="circle" name="Bob Smith" />
      <CfAvatar shape="square" name="Bob Smith" />
    </div>
  </div>
</template>
<script setup>
import { CfAvatar } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack">
    <div class="demo-row" style="align-items: flex-end;">
      <CfAvatar size="xs" name="Chen Qi" />
      <CfAvatar size="sm" name="Chen Qi" />
      <CfAvatar size="md" name="Chen Qi" />
      <CfAvatar size="lg" name="Chen Qi" />
      <CfAvatar size="xl" name="Chen Qi" />
    </div>
    <div class="demo-row">
      <CfAvatar shape="circle" name="Bob Smith" />
      <CfAvatar shape="square" name="Bob Smith" />
    </div>
  </div>
</template>
import { CfAvatar } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfAvatar size="xs" name="Chen Qi" />
      <CfAvatar size="sm" name="Chen Qi" />
      <CfAvatar size="md" name="Chen Qi" />
      <CfAvatar size="lg" name="Chen Qi" />
      <CfAvatar size="xl" name="Chen Qi" />
      <CfAvatar shape="circle" name="Bob Smith" />
      <CfAvatar shape="square" name="Bob Smith" />
    </>
  );
}
import { CfAvatar } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfAvatar size="xs" name="Chen Qi" />
      <CfAvatar size="sm" name="Chen Qi" />
      <CfAvatar size="md" name="Chen Qi" />
      <CfAvatar size="lg" name="Chen Qi" />
      <CfAvatar size="xl" name="Chen Qi" />
      <CfAvatar shape="circle" name="Bob Smith" />
      <CfAvatar shape="square" name="Bob Smith" />
    </>
  );
}

Fallback priority

The second example points at a non-existent src and falls back to initials computed from name. The last one uses a custom icon.

背景 视口
正常加载FTCQASAI
src/App.vue 
<script setup lang="ts">
import { CfAvatar } from '@chufix-design/vue';

const avatarSrc = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2218%22 fill=%22%23ecfeff%22/%3E%3Ccircle cx=%2240%22 cy=%2231%22 r=%2213%22 fill=%22%230891b2%22/%3E%3Cpath d=%22M17 68c5-16 16-24 23-24s18 8 23 24%22 fill=%22%2322d3ee%22/%3E%3C/svg%3E';
</script>
<template>
  <div class="demo-row">
    <CfAvatar :src="avatarSrc" alt="正常加载" />
    <CfAvatar name="Fallback Test" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="anna lee smith" />
    <CfAvatar fallback="AI" />
    <CfAvatar>
      <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
        <circle cx="8" cy="6" r="3" />
        <path d="M2 14a6 6 0 0 1 12 0" />
      </svg>
    </CfAvatar>
  </div>
</template>
<script setup>
import { CfAvatar } from '@chufix-design/vue';

const avatarSrc = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2218%22 fill=%22%23ecfeff%22/%3E%3Ccircle cx=%2240%22 cy=%2231%22 r=%2213%22 fill=%22%230891b2%22/%3E%3Cpath d=%22M17 68c5-16 16-24 23-24s18 8 23 24%22 fill=%22%2322d3ee%22/%3E%3C/svg%3E';
</script>
<template>
  <div class="demo-row">
    <CfAvatar :src="avatarSrc" alt="正常加载" />
    <CfAvatar name="Fallback Test" />
    <CfAvatar name="Chen Qi" />
    <CfAvatar name="anna lee smith" />
    <CfAvatar fallback="AI" />
    <CfAvatar>
      <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
        <circle cx="8" cy="6" r="3" />
        <path d="M2 14a6 6 0 0 1 12 0" />
      </svg>
    </CfAvatar>
  </div>
</template>
import { CfAvatar } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfAvatar src="https://i.pravatar.cc/80?img=22" alt="Loaded normally" />
      <CfAvatar src="/__intentionally_404__.png" name="Fallback Test" />
      <CfAvatar name="Chen Qi" />
      <CfAvatar name="anna lee smith" />
      <CfAvatar fallback="🐱" />
      <CfAvatar><UserSvg /></CfAvatar>
    </>
  );
}
import { CfAvatar } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfAvatar src="https://i.pravatar.cc/80?img=22" alt="Loaded normally" />
      <CfAvatar src="/__intentionally_404__.png" name="Fallback Test" />
      <CfAvatar name="Chen Qi" />
      <CfAvatar name="anna lee smith" />
      <CfAvatar fallback="🐱" />
      <CfAvatar><UserSvg /></CfAvatar>
    </>
  );
}

AvatarGroup overlap

AvatarGroup arranges avatars in an overlapping row — common for “X people collaborating” lists. spacing controls the overlap (more negative = more overlap).

背景 视口
+5ANBOCIDE+12
src/App.vue 
<script setup lang="ts">
import { CfAvatar, CfAvatarGroup } from '@chufix-design/vue';

const avatarBlue = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2220%22 fill=%22%23dbeafe%22/%3E%3Ccircle cx=%2240%22 cy=%2232%22 r=%2214%22 fill=%22%232563eb%22/%3E%3Cpath d=%22M16 70c4-18 16-27 24-27s20 9 24 27%22 fill=%22%2360a5fa%22/%3E%3C/svg%3E';
const avatarGreen = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2220%22 fill=%22%23dcfce7%22/%3E%3Ccircle cx=%2240%22 cy=%2232%22 r=%2214%22 fill=%22%2316a34a%22/%3E%3Cpath d=%22M16 70c4-18 16-27 24-27s20 9 24 27%22 fill=%22%2386efac%22/%3E%3C/svg%3E';
const avatarAmber = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2220%22 fill=%22%23fef3c7%22/%3E%3Ccircle cx=%2240%22 cy=%2232%22 r=%2214%22 fill=%22%23d97706%22/%3E%3Cpath d=%22M16 70c4-18 16-27 24-27s20 9 24 27%22 fill=%22%23fbbf24%22/%3E%3C/svg%3E';
</script>
<template>
  <div class="demo-stack">
    <CfAvatarGroup>
      <CfAvatar :src="avatarBlue" />
      <CfAvatar :src="avatarGreen" />
      <CfAvatar :src="avatarAmber" />
      <CfAvatar fallback="+5" />
    </CfAvatarGroup>
    <CfAvatarGroup :spacing="-4">
      <CfAvatar size="sm" name="Anna" />
      <CfAvatar size="sm" name="Bob" />
      <CfAvatar size="sm" name="Cici" />
      <CfAvatar size="sm" name="Dean" />
      <CfAvatar size="sm" fallback="+12" />
    </CfAvatarGroup>
  </div>
</template>
<script setup>
import { CfAvatar, CfAvatarGroup } from '@chufix-design/vue';

const avatarBlue = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2220%22 fill=%22%23dbeafe%22/%3E%3Ccircle cx=%2240%22 cy=%2232%22 r=%2214%22 fill=%22%232563eb%22/%3E%3Cpath d=%22M16 70c4-18 16-27 24-27s20 9 24 27%22 fill=%22%2360a5fa%22/%3E%3C/svg%3E';
const avatarGreen = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2220%22 fill=%22%23dcfce7%22/%3E%3Ccircle cx=%2240%22 cy=%2232%22 r=%2214%22 fill=%22%2316a34a%22/%3E%3Cpath d=%22M16 70c4-18 16-27 24-27s20 9 24 27%22 fill=%22%2386efac%22/%3E%3C/svg%3E';
const avatarAmber = 'data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 rx=%2220%22 fill=%22%23fef3c7%22/%3E%3Ccircle cx=%2240%22 cy=%2232%22 r=%2214%22 fill=%22%23d97706%22/%3E%3Cpath d=%22M16 70c4-18 16-27 24-27s20 9 24 27%22 fill=%22%23fbbf24%22/%3E%3C/svg%3E';
</script>
<template>
  <div class="demo-stack">
    <CfAvatarGroup>
      <CfAvatar :src="avatarBlue" />
      <CfAvatar :src="avatarGreen" />
      <CfAvatar :src="avatarAmber" />
      <CfAvatar fallback="+5" />
    </CfAvatarGroup>
    <CfAvatarGroup :spacing="-4">
      <CfAvatar size="sm" name="Anna" />
      <CfAvatar size="sm" name="Bob" />
      <CfAvatar size="sm" name="Cici" />
      <CfAvatar size="sm" name="Dean" />
      <CfAvatar size="sm" fallback="+12" />
    </CfAvatarGroup>
  </div>
</template>
import { CfAvatar, CfAvatarGroup } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfAvatarGroup>
      <CfAvatar src="https://i.pravatar.cc/80?img=1" />
      <CfAvatar src="https://i.pravatar.cc/80?img=2" />
      <CfAvatar src="https://i.pravatar.cc/80?img=3" />
      <CfAvatar fallback="+5" />
      </CfAvatarGroup>
      <CfAvatarGroup spacing={-4}>
      <CfAvatar size="sm" name="Anna" />
      <CfAvatar size="sm" name="Bob" />
      <CfAvatar size="sm" name="Cici" />
      <CfAvatar size="sm" fallback="+12" />
      </CfAvatarGroup>
    </>
  );
}
import { CfAvatar, CfAvatarGroup } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfAvatarGroup>
      <CfAvatar src="https://i.pravatar.cc/80?img=1" />
      <CfAvatar src="https://i.pravatar.cc/80?img=2" />
      <CfAvatar src="https://i.pravatar.cc/80?img=3" />
      <CfAvatar fallback="+5" />
      </CfAvatarGroup>
      <CfAvatarGroup spacing={-4}>
      <CfAvatar size="sm" name="Anna" />
      <CfAvatar size="sm" name="Bob" />
      <CfAvatar size="sm" name="Cici" />
      <CfAvatar size="sm" fallback="+12" />
      </CfAvatarGroup>
    </>
  );
}

API

Avatar

PropTypeDefaultDescription
srcstring—Image URL; auto-falls back on load failure
altstring—Image alt; falls back to name when unset
namestring—Used to compute initials (first letter of first and last words)
fallbackstring—Override for the initial text, takes priority over name
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Size
shape'circle' | 'square''circle'Shape

The default slot (Vue) / children (React) replaces the initials — typically used to drop in an SVG icon.

AvatarGroup

PropTypeDefaultDescription
spacingnumber-8Horizontal spacing between items; negative values create overlap

反馈与讨论

Avatar · Discussion

0
0 / 600
正在加载评论...