npm i @tntx/text-avatar-react --save
import React from 'react';
import { message } from 'antd';
import TextAvatar from '@tntx/text-avatar-react';
export default props => {
const user = {
id: 10,
account: 'xiaoming',
empStatus: 1,
nickname: '王小明'
};
const cardConfig = [
{
label: '部门',
value: '企业技术部-PaaS-UED'
},
{
label: '邮箱',
value: '[email protected]'
}
];
return (
<TextAvatar
{...user}
cardConfig={cardConfig}
onClick={() => {
message.info('跳转链接');
}}
/>
);
};
| 参数 |
数据类型 |
是否必填 |
默认值 |
备注 |
| nickname |
String |
是 |
- |
用户昵称 |
| account |
String |
是 |
- |
用户账号,用来判断使用颜色 |
| empStatus |
number |
否 |
1 |
用户状态,1是正常状态,2则为灰色 |
| showPopover |
boolean |
否 |
true |
是否显示popover浮层 |
| size |
number |
否 |
32 |
头像大小(宽高) |
| linearGradient |
boolean |
否 |
false |
是否渐变 |
| randomColor |
boolean |
否 |
true |
是否随机颜色,如果不随机,则为固定蓝色 |
| onClick |
function |
否 |
- |
卡片内的头像点击 |
| theme |
String |
否 |
default |
卡片内的主题,default、plant |
| sameAsChildren |
boolean |
否 |
true |
卡片内的头像是否和children一样 |
| 参数 |
数据类型 |
是否必填 |
默认值 |
备注 |
| trigger |
String |
否 |
hover |
浮层详情显示方式,同Popover |
| placement |
String |
否 |
rightTop |
浮层详情显示位置,同Popover |
| cardConfig |
Array |
是 |
[] |
卡片内的详情配置 |
| onClick |
function |
否 |
- |
卡片内的头像点击 |