# 头像 Avatar

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/avatar
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

用作头像显示，可以为图片、图标或字符形式展示。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：头像的基础使用。如果头像是文字的话，会自动调节字体大小，来适应头像框。
- **大小和形状**：通过设置 `size` 字段，可以调节头像的大小，默认大小为 `40px`。设置 `shape` 字段，可以设置头像是圆形 (circle) 还是正方形 (square)。
- **头像组**：使用 `Avatar.Group` 可以使用头像组功能，可通过 `size` 指定头像的大小。
- **交互按钮**：可以通过 `triggerIcon` `triggerType` 来定制交互按钮，类型有 `mask (遮罩)` 和 `button (按钮)` 两种，通过 `onClick` 参数来添加回调。
- **自动调整字体大小**：如果头像是文字的话，会自动调节字体大小，来适应头像框。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Avatar

|参数名|描述|类型|默认值|
|---|---|---|---|
|autoFixFontSize|是否自动根据头像尺寸调整字体大小。|boolean |`true`|
|size|头像的尺寸大小，单位是 `px`|number |`-`|
|shape|头像的形状，有圆形(circle)和正方形(square)两种|'circle' \| 'square' |`circle`|
|triggerType|可点击的头像交互类型。|'mask' \| 'button' |`button`|
|triggerIcon|可点击的头像交互图标。|ReactNode |`-`|
|className|节点类名|string \| string[] |`-`|
|style|节点样式|CSSProperties |`-`|
|triggerIconStyle|交互图标的样式|CSSProperties |`-`|
|onClick|点击回调|(e) => void |`-`|

### Avatar.Group

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|autoFixFontSize|是否自动根据头像尺寸调整字体大小，(优先级低于 Avatar 组件本身)|boolean |`true`|-|
|zIndexAscend|头像组内的头像 `z-index` 递增，默认是递减。|boolean |`-`|2.3.0|
|maxCount|头像组最多显示的头像数量，多余头像将以 `+x` 的形式展示。|number |`-`|2.4.0|
|size|头像的尺寸大小，单位是 `px`，(优先级低于 Avatar 组件本身)|number |`-`|-|
|shape|头像的形状，(优先级低于 Avatar 组件本身)|'circle' \| 'square' |`circle`|-|
|className|节点类名|string \| string[] |`-`|-|
|maxPopoverTriggerProps|多余头像气泡的 `TriggerProps`。|[TriggerProps](trigger#trigger) |`-`|2.4.0|
|maxStyle|多余头像样式。|CSSProperties |`-`|2.4.0|
|style|节点样式|CSSProperties |`-`|-|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt