Avatar
Avatar 用于代表用户，并显示用户的个人资料照片、姓名首字母或备用图标。
使用
A
XY
Sizes
Radius
Colors
Fallbacks
Avatar 如果加载图片时出现错误，将按以下顺序回退到备用选项：
-
children属性 -
alt第一个字母
X
A
API
Avatar Props
Avatar Props 默认继承 as 的 Props，其 as 默认为 HTML div 标签。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | 如果 src 未提供，可在组件内渲染图标或者文本。 |
| size | 'sm'|'md'|'lg' | 'md' | Avatar 的大小。 |
| color | 'blue'|'orange'|'yellow'|'ryan'|'red'|'green'|'pick'|'purple'|'gray' | 'gray' | Avatar 的颜色。 |
| radius | 'sm'|'md'|'lg'|'full' | size | Avatar 的 borderRadius。 |
| className | ClassValue | - | 用于根元素的 className。 |
| src | string | - | 显示图片的 URL。 |
| srcSet | string | - | HTML img 元素的 srcSet。 |
| alt | string | - | 与 src 或 srcSet 结合使用，为渲染的 img 元素提供一个 alt 属性。 |
| ref | Ref | - | 用于转发根元素。 |
| as | ElementType | 'div' | 用于根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | CSSObject|CSSObject[]|(ownerState: OwnerState) => CSSObject | CSSObject[]) | - | 用于根元素的 sx 属性。 |
| classes | Partial<Record<Slots, ClassValue>> | - | Avatar Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentPropsWithRef>> | - | Avatar Slots 的 props。 |
Avatar Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| img | .nui-avatar-img | 'img' | HTML img 元素。 |
最后更新时间