Avatar

Avatar 用于代表用户，并显示用户的个人资料照片、姓名首字母或备用图标。

Usage

Avatar 如果加载图片时出现错误，将按以下顺序回退到备用选项：

max 属性可限制 AvatarGroup 中显示的最大 Avatar 数量。

total 属性控制显示 AvatarGroup 中的总 Avatar 数量。

spacing 属性可设置 AvatarGroup 中 Avatar 之间的间距。

renderSurplus 为 AvatarGroup 中的剩余 Avatar 提供自定义渲染。设置 renderSurplus 为一个函数，该函数接收一个基于 children 和 max 计算出的多余数量作为参数。

Avatar 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	如果 src 未提供，可在组件内渲染图标或者文本。
size	'sm'\|'md'\|'lg'\|'xl'	'md'	Avatar 的大小。
color	'blue'\|'orange'\|'yellow'\|'ryan'\|'red'\|'green'\|'pink'\|'purple'\|'gray'	'gray'	Avatar 的颜色。
radius	'sm'\|'md'\|'lg'\|'xl'\|'full'\|'none'	size	Avatar 的 borderRadius。
className	ClassValue	-	用于根元素的 className。
src	string	-	显示图片的 URL。
srcSet	string	-	HTML img 元素的 srcSet。
alt	string	-	与 src 或 srcSet 结合使用，为渲染的 img 元素提供一个 alt 属性。
ref	Ref	-	用于转发根元素。
outlined	boolean	false	是否显示边框。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
classes	Partial<Record<Slots, ClassValue>>	-	Avatar Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	Avatar Slots 的 props。

Slot Name	Class Name	Default Component	Description
img	.nui-avatar-img	'img'	HTML img 元素。

AvatarGroup 继承 as (默认为 'div') 的 Props。

Prop	Type	Default	Description
children	ReactNode	-	通常为 Avatar 组件。
size	'sm'\|'md'\|'lg'\|'xl'	'md'	所有 Avatar 的大小。
color	'blue'\|'orange'\|'yellow'\|'ryan'\|'red'\|'green'\|'pink'\|'purple'\|'gray'	'gray'	所有 Avatar 的颜色。
radius	'sm'\|'md'\|'lg'\|'xl'\|'full'\|'none'	size	所有 Avatar 的 borderRadius。
className	ClassValue	-	用于根元素的 className。
ref	Ref	-	用于转发根元素。
outlined	boolean	false	是否显示所有 Avatar 的边框。
max	number	5	AvatarGroup 中显示的最大 Avatar 数量。
total	number	-	AvatarGroup 中的总 Avatar 数量。
spacing	string \| number	-	Avatar 之间的间距。
renderSurplus	(surplus: number) => ReactNode	-	自定义渲染剩余 Avatar 的函数。接收一个 surplus 参数，表示多余的 Avatar 数量。
as	ElementType	'div'	用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
classes	Partial<Record<Slots, ClassValue>>	-	AvatarGroup Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	AvatarGroup Slots 的 props。

Slot Name	Class Name	Default Component	Description
surplus	.nui-avatar-group-surplus	Avatar	用于显示多余的 Avatar 的组件。