头像

头像组件用于表示用户，显示个人资料图片、首字母或备用内容。

导入

import { Avatar, AvatarGroup, AvatarBadge } from "@resolid/react-ui";

Avatar: 代表用户的图片。
AvatarBadge: 一个包装器，将其内容显示在头像的右上角。
AvatarGroup: 一个用于将多个头像堆叠在一起的包装器。

基础

<Avatar name={'Alexander Hipp'} src={'https://file.resolid.tech/images%2Fa001.jpg'} />
<Avatar name={'Alex Suprun'} src={''} />
<Avatar src={'https://file.resolid.tech/images%2Fa004.jpg'} />
<Avatar name={'Linh Le'} src={''} />
<Avatar src={'https://file.resolid.tech/images%2Fa003.jpg'} />
<Avatar src={''} />

大小

<Avatar size={'xs'} name={'Alexander Hipp'} src={'https://file.resolid.tech/images%2Fa001.jpg'} />
<Avatar size={'sm'} name={'Alex Suprun'} src={''} />
<Avatar src={'https://file.resolid.tech/images%2Fa004.jpg'} />
<Avatar size={'lg'} src={''} />
<Avatar size={'xl'} name={'Linh Le'} src={''} />
<Avatar size={128} src={'https://file.resolid.tech/images%2Fa002.jpg'} />

圆角

<Avatar radius={'sm'} name={'Alexander Hipp'} src={'https://file.resolid.tech/images%2Fa001.jpg'} />
<Avatar radius name={'Alex Suprun'} src={''} />
<Avatar radius={'lg'} src={'https://file.resolid.tech/images%2Fa004.jpg'} />
<Avatar radius={'xl'} name={'Linh Le'} src={''} />
<Avatar radius={10} src={'https://file.resolid.tech/images%2Fa003.jpg'} />
<Avatar src={''} />

徽标

<Avatar name={'Alexander Hipp'} src={'https://file.resolid.tech/images%2Fa001.jpg'}>
  <AvatarBadge className={'border-3 h-5 w-5 border-bd-subtle bg-bg-success-emphasis'} />
</Avatar>
<Avatar name={'Linh Le'} src={''}>
  <AvatarBadge className={'border-3 h-5 w-5 border-bd-subtle bg-bg-warning-emphasis'} />
</Avatar>
<Avatar src={'https://file.resolid.tech/images%2Fa004.jpg'}>
  <AvatarBadge className={'border-3 h-5 w-5 border-bd-subtle bg-bg-danger-emphasis'} />
</Avatar>
<Avatar src={''}>
  <AvatarBadge className={'border-3 h-5 w-5 border-bd-subtle bg-bg-primary-emphasis'} />
</Avatar>

头像组

<AvatarGroup limit={5}>
  <Avatar name={'Alexander Hipp'} src={'https://file.resolid.tech/images%2Fa001.jpg'} />
  <Avatar name={'Alex Suprun'} src={''} />
  <Avatar src={'https://file.resolid.tech/images%2Fa004.jpg'} />
  <Avatar name={'Linh Le'} src={''} />
  <Avatar src={'https://file.resolid.tech/images%2Fa003.jpg'} />
  <Avatar src={''} />
  <Avatar src={''} />
  <Avatar src={''} />
</AvatarGroup>
<AvatarGroup size={'lg'} limit={3}>
  <Avatar name={'Alexander Hipp'} src={'https://file.resolid.tech/images%2Fa001.jpg'} />
  <Avatar name={'Alex Suprun'} src={''} />
  <Avatar src={'https://file.resolid.tech/images%2Fa004.jpg'} />
  <Avatar name={'Linh Le'} src={''} />
  <Avatar src={'https://file.resolid.tech/images%2Fa003.jpg'} />
  <Avatar src={''} />
</AvatarGroup>

属性

头像

属性	类型	默认值	必须
属性size	类型number \| Size	默认值'md'	必须false
属性radius	类型number \| false \| true \| "xs" \| "sm" \| "lg" \| "xl" \| "full"	默认值'full'	必须false
属性src	类型string	默认值-	必须false
属性srcSet	类型string	默认值-	必须false
属性name	类型string	默认值-	必须false
属性loading	类型"eager" \| "lazy"	默认值-	必须false
属性fallback	类型ReactElement	默认值'DefaultIcon'	必须false
属性referrerPolicy	类型"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"	默认值-	必须false
属性onError	类型() => void	默认值-	必须false

头像组

属性	类型	默认值	必须
属性size	类型number \| Size	默认值'md'	必须false
属性radius	类型number \| false \| true \| "xs" \| "sm" \| "lg" \| "xl" \| "full"	默认值'full'	必须false
属性limit	类型number \| null	默认值3	必须false
属性spacing	类型string	默认值'-0.75em'	必须false