@dsyx/text-avatar

1.0.1 • Public • Published

文字头像组件

安装

npm i @dsyx/text-avatar --save

使用

import React from 'react';
import { message } from 'antd';
import TextAvatar from '@dsyx/text-avatar';

export default props => {
	const user = {
	    id: 10,
		account: 'xiaoming',
		empStatus: 1,
		nickname: '王小明'	 
	};

	const cardConfig = [
		{
			label: '部门',
			value: '企业技术部-PaaS-UED'
		},
		{
			label: '邮箱',
			value: 'xiaoming@qq.com'
		}
	];

	return (
		<TextAvatar
			{...user}
			cardConfig={cardConfig}
			onClick={() => {
				message.info('跳转链接');
			}}
		/>
	);
};

API

组件API

参数 数据类型 是否必填 默认值 备注
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一样

浮层相关API

参数 数据类型 是否必填 默认值 备注
trigger String hover 浮层详情显示方式,同Popover
placement String rightTop 浮层详情显示位置,同Popover
cardConfig Array [] 卡片内的详情配置
onClick function - 卡片内的头像点击

Package Sidebar

Install

npm i @dsyx/text-avatar

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

237 kB

Total Files

24

Last publish

Collaborators

  • chaizhou
  • zhanghee
  • bruceliu68
  • dashangyun