1.1.3 • Published 1 year ago
Teamix Avatar （迁移自旧版 AT Avatar 组件）
开发指南
样式前缀
如需给 Avatar 内部所用到的 @teamix/ui 组件指定 prefix，可添加 uiPrefix 参数（如 uiPrefix='aone-'）
API
Avatar
| 参数 | 说明 | 类型 | 默认值 |
|---|
| style | 设置组件样式 | Object | - |
| className | 设置组件className | String | - |
| size | 设置组件尺寸，可选值 'xs', 'small', 'medium', 'large', 'xl' | String | 'medium' |
| img | 设置头像图片地址，必填 | String | - |
| text | 设置头像旁文案，必填 | String | - |
| closable | 是否显示关闭按钮 | Boolean | true |
| onClose | 点击关闭回调 | Function | () => {} |
| onClick | 点击头像回调 | Function | () => {} |
Avatar.TextAvatar
| 参数 | 说明 | 类型 | 默认值 |
|---|
| style | 设置组件样式 | Object | - |
| className | 设置组件className | String | - |
| size | 设置组件尺寸，可选值 'xs', 'small', 'medium', 'large', 'xl' | String | 'medium' |
| text | 设置头像文案，必填 | String | - |
| colorSets | 头像背景色集，会根据text的charCode选取其中一个作为背景色 | String数组 | ['#D3B0E7', '#B0B2E7', '#88ACDE', '#91D0E3', '#82D4BE', '#AFD492'] |
Avatar.ImageAvatar
| 参数 | 说明 | 类型 | 默认值 |
|---|
| style | 设置组件样式 | Object | - |
| className | 设置组件className | String | - |
| size | 设置组件尺寸，可选值 'xs', 'small', 'medium', 'large', 'xl' | String | 'medium' |
| img | 设置头像图片地址，必填 | String | - |
Avatar.ClusterAvatar
| 参数 | 说明 | 类型 | 默认值 |
|---|
| style | 设置组件样式 | Object | - |
| className | 设置组件className | String | - |
| dataSource | 头像群数据源，数组成员见下方，必填 | Array | - |
| colorSets | 头像背景色集，img不存在时会根据text的charCode选取其中一个作为背景色 | String数组 | ['#D3B0E7', '#B0B2E7', '#88ACDE', '#91D0E3', '#82D4BE', '#AFD492'] |
| onSelect | 点击单个头像回调，入参为该头像相关参数 | Function | (data) => {} |
| onClose | 关闭单个头像回调，入参为该头像相关参数 | Function | (data) => {} |
| onAdd | 点击添加回调 | Function | () => {} |
Avatar.GroupAvatar
| 参数 | 说明 | 类型 | 默认值 |
|---|
| style | 设置组件样式 | Object | - |
| className | 设置组件className | String | - |
| colorSets | 头像背景色集，img不存在时会根据text的charCode选取其中一个作为背景色 | String数组 | ['#D3B0E7', '#B0B2E7', '#88ACDE', '#91D0E3', '#82D4BE', '#AFD492'] |
| dataSource | 头像群数据源，数组成员见下方，必填 | Array | - |
| onClickMore | 点击更多回调 | Function | () => {} |
| showMore | hover到...是否显示更多用户 | Boolean | false |
| align | 用户名字展示位置 | Enum | 'b', (参考：https://teamix.space-x.alibaba-inc.com/ui/balloon?theme=yunxiao) |
dataSource成员
| 参数 | 说明 | 类型 | 默认值 |
|---|
| img | 头像图片地址 | String | - |
| text | 头像对应文案，必填 | String | - |
| id | 头像对应id，必填 | String or Number | - |