Avatar
显示人物头像，无图片时显示姓名首字母。呈圆形，外围有一圈墨黑色的环，最外侧再加一道暗色细线；尺寸对应三种控件高度。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/avatar示例
图片、首字母与头像组
MKRV
MKRVJO
+4
import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage,} from "@/components/zero/avatar";export default function AvatarKinds() { return ( <div className="flex flex-wrap items-center gap-6"> <Avatar size="lg"> <AvatarImage src="/samples/portrait-a.svg" alt="Mara K." /> <AvatarFallback>MK</AvatarFallback> <AvatarBadge /> </Avatar> <Avatar> <AvatarFallback>RV</AvatarFallback> </Avatar> <AvatarGroup> <Avatar size="sm"> <AvatarImage src="/samples/portrait-a.svg" alt="Mara K." /> <AvatarFallback>MK</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarImage src="/samples/portrait-b.svg" alt="Rui V." /> <AvatarFallback>RV</AvatarFallback> </Avatar> <Avatar size="sm"> <AvatarFallback>JO</AvatarFallback> </Avatar> <AvatarGroupCount size="sm">+4</AvatarGroupCount> </AvatarGroup> </div> );}行为
圆形是 zzzUI 唯一允许的圆角，仅用于本身就是圆形的事物。图片加载期间及加载失败时显示首字母。
AvatarBadge 在边缘放置一个状态圆点，默认为强调色，可另行指定颜色。AvatarGroup 将多个头像重叠排列，AvatarGroupCount 显示其余头像的数量。
属性
AvatarImage, AvatarFallback
另可传入 Base UI Avatar.Image 的全部属性。