UG666

UG666 UI
@ug666/react 文档演示

Avatar 头像

Avatar 适合在用户列表、评论区和导航栏中展示身份信息。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Avatar, AvatarImage, AvatarFallback } from '@ug666/react'

变体预览

图片头像与首字母回退。

MUGUI

状态展示

图片加载失败时自动回退到占位内容。

回退

尺寸展示

支持 sm、md、lg、xl 四种尺寸。

SMLXL

代码示例

推荐始终为图片头像准备回退内容。

import { Avatar, AvatarFallback, AvatarImage } from '@ug666/react'

export function UserAvatar() {
  return (
    <Avatar size="lg">
      <AvatarImage src="https://i.pravatar.cc/120?img=12" alt="用户头像" />
      <AvatarFallback>UG</AvatarFallback>
    </Avatar>
  )
}

Props 说明

属性类型默认值说明
size'sm' | 'md' | 'lg' | 'xl''md'控制头像容器尺寸。
srcstring—AvatarImage 的图片地址。
childrenReactNode—可组合 AvatarImage 与 AvatarFallback。