React 组件

UGAvatar 头像

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGAvatar, UGAvatarImage, UGAvatarFallback } from '@ug666/ui-react'

变体预览

图片头像与首字母回退。

MUGUI

状态展示

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

回退

尺寸展示

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

SMLXL

代码示例

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

tsx

import { UGAvatar, UGAvatarFallback, UGAvatarImage } from '@ug666/ui-react'

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

Props

属性	类型	默认值	说明
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	控制头像容器尺寸。
src	string	—	UGAvatarImage 的图片地址。
children	ReactNode	—	可组合 UGAvatarImage 与 UGAvatarFallback。