---
title: Avatar - 头像
path: /Avatar
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 4
  title: 数据展示
  path: /dataShow
---

用图标、图片、字符的形式展示用户或事物信息

## 头像类型

头像提供了 5 种不同类型的头像：图标头像、图片头像、字符头像

<code src="./demos/base.tsx" />

## 头像形状

头像默认支持两种形状：shape、circle（也可自定义圆角大小），用户也可自定义设置头像形状

<code src="./demos/shape.tsx" />

## 头像大小

头像默认支持三种大小：small、medium、large，用户可自定义设置大小

<code src="./demos/size.tsx" />

## 组合头像

组合头像展现

<code src="./demos/group.tsx" />

## 自动调整字体大小

如果头像是文字的话，会自动调节字体大小，来适应头像框。

<code src="./demos/auto.tsx" />

## API

### Avatar

| 参数        | 说明                                                          | 类型                                                                                                 | 默认值   |
| ----------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------- |
| alt         | 图像无法显示时的替代文本                                      | string                                                                                               | -        |
| gap         | 字符类型距离左右两侧边界单位像素                              | number                                                                                               | 4        |
| icon        | 设置头像的自定义图标                                          | ReactNode                                                                                            | -        |
| shape       | 指定头像的形状                                                | `circle` \| `square`                                                                                 | `circle` |
| size(可选)  | 设置头像的大小                                                | `number \| large:64px \| default:48px\| small:36px \|smaller:24px \| { xs: number, sm: number, ...}` | default  |
| src         | 图片类头像的资源地址或者图片元素                              | string \| ReactNode                                                                                  | -        |
| srcSet      | 设置图片类头像响应式资源地址                                  | string                                                                                               | -        |
| draggable   | 图片是否允许拖动                                              | boolean \| `'true'` \| `'false'`                                                                     | -        |
| crossOrigin | CORS 属性设置                                                 | `'anonymous'` \| `'use-credentials'` \| `''`                                                         | -        |
| onError     | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean                                                                                        | -        |
| type        | 头像类型                                                      | `man`\|`woman`\|`aydin`                                                                              | -        |

> Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`

### Avatar.Group

| 参数                | 说明                            | 类型                                                                                                 | 默认值  |
| ------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------- | ------- |
| maxCount            | 显示的最大头像个数              | number                                                                                               | -       |
| maxPopoverPlacement | 多余头像气泡弹出位置            | `top` \| `bottom`                                                                                    | `top`   |
| maxPopoverTrigger   | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click`                                                                        | `hover` |
| maxStyle            | 多余头像样式                    | CSSProperties                                                                                        | -       |
| size(可选)          | 设置头像的大小                  | `number \| large:64px \| default:48px\| small:36px \|smaller:24px \| { xs: number, sm: number, ...}` | default |
| maxText             | 超出文本                        | `string`\|`number`                                                                                   | -       |