数据与反馈@neumorphism-ui/avatar

Avatar

基于 Base UI Avatar 处理图片加载和 fallback 切换。提供三种尺寸、状态 Badge、重叠的头像组以及剩余人数计数。

@neumorphism-ui/avatar

Registry JSON

预览

SMAMUI

团队

ANDESO

安装

npx shadcn@latest add @neumorphism-ui/avatar

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage,
} from "@/components/ui/avatar"

Example

<AvatarGroup>
  <Avatar size="lg">
    <AvatarImage src="/members/ana.jpg" alt="Ana Martins" />
    <AvatarFallback>AM</AvatarFallback>
    <AvatarBadge aria-label="在线" />
  </Avatar>
  <Avatar size="lg">
    <AvatarFallback>UI</AvatarFallback>
  </Avatar>
  <AvatarGroupCount aria-label="另外 8 名成员">+8</AvatarGroupCount>
</AvatarGroup>

API 参考

组件	属性	类型	默认值	说明
`Avatar`	`size`	`"sm" \| "default" \| "lg"`	`"default"`	同时调整 Avatar 与 Badge 的尺寸。
`AvatarImage`	`src`	`string`	`—`	要显示的图片 URL。
`AvatarImage`	`alt`必填	`string`	`—`	说明图片中人物或对象的替代文本。
`AvatarFallback`	`delayMs`	`number`	`0`	显示 fallback 前的等待时间。
`AvatarBadge`	`children`	`React.ReactNode`	`—`	显示状态点或小型状态图标。

预览

安装

用法

Import

Example

API 参考

无障碍