Avatar 头像
头像类型
图片头像
字符头像
图标头像
徽标头像
组合头像
纯展示
带操作
头像尺寸
头像 large/medium/small 尺寸
Avatar Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N |
| badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：BadgeProps，Badge API Documents。详细类型定义 | N |
| hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N |
| icon | Slot / Function | - | 图标。TS 类型：TNode。通用类型定义 | N |
| image | String | - | 图片地址 | N |
| imageProps | Object | - | 透传至 Image 组件。TS 类型：ImageProps，Image API Documents。详细类型定义 | N |
| shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定。可选项：circle/round。TS 类型：ShapeEnum。通用类型定义 | N |
| size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 | N |
| onError | Function | TS 类型：(context: { e: Event }) => void图片加载失败时触发 | N |
Avatar Events
| 名称 | 参数 | 描述 |
|---|---|---|
| error | (context: { e: Event }) | 图片加载失败时触发 |
AvatarGroup Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：CascadingValue type CascadingValue = 'left-up' \| 'right-up'。详细类型定义 | N |
| collapseAvatar | String / Slot / Function | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 +N。示例：+5，..., 更多。TS 类型：string \| TNode。通用类型定义 | N |
| max | Number | - | 能够同时显示的最多头像数量 | N |
| shape | String | - | 形状。优先级低于 Avatar.shape。可选项：circle/round。TS 类型：ShapeEnum。通用类型定义 | N |
| size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N |
| onCollapsedItemClick | Function | TS 类型：(context: { e: MouseEvent }) => void点击头像折叠元素触发 | N |
AvatarGroup Events
| 名称 | 参数 | 描述 |
|---|---|---|
| collapsed-item-click | (context: { e: MouseEvent }) | 点击头像折叠元素触发 |
CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --td-avatar-group-margin-left-large | -8px | - |
| --td-avatar-group-margin-left-medium | -6px | - |
| --td-avatar-group-margin-left-small | -4px | - |
| --td-avatar-bg-color | @brand-color-light-active | - |
| --td-avatar-border-color | #fff | - |
| --td-avatar-border-width-large | 4px | - |
| --td-avatar-border-width-medium | 3px | - |
| --td-avatar-border-width-small | 2px | - |
| --td-avatar-circle-border-radius | @radius-circle | - |
| --td-avatar-content-color | @brand-color | - |
| --td-avatar-icon-large-font-size | 32px | - |
| --td-avatar-icon-medium-font-size | 24px | - |
| --td-avatar-icon-small-font-size | 20px | - |
| --td-avatar-large-width | 64px | - |
| --td-avatar-margin-left | 0 | - |
| --td-avatar-medium-width | 48px | - |
| --td-avatar-round-border-radius | @radius-default | - |
| --td-avatar-small-width | 40px | - |
| --td-avatar-text-large-font-size | 16px | - |
| --td-avatar-text-medium-font-size | @font-size-base | - |
| --td-avatar-text-small-font-size | @font-size-s | - |
何时使用
作为一个用户信息展示，或用来代表某个/某些具体用户。
组件搭配使用
头像与动作面板 组合使用，在分享场景中利用动作面板承载用户头像，用于分享对象的选择。
头像与单元格 组合使用，用于展示结构化的成员名称及信息，方便快速识别。
头像与徽标 组合使用，可作为消息提示或人员数量提示等。
常见用法
多个头像可组合展示构成头像组；当页面布局空间有限，超过可外显个数时候，可将重复性较高的头像信息做隐藏收起，需要时再让用户主动触发查看。
推荐/慎用示例
对于字符型头像，需要根据场景定义最大字符数，避免字符过多影响可读性，降低可识别度。
