Skip to content

About

文字头像插件

Resources

Stars

2 stars

Watchers

3 watching

Forks

Repository files navigation

text-avatar-react 文字头像组件

安装

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('跳转链接');
	  }}
	/>
  );
};

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 否 - 卡片内的头像点击

About

文字头像插件

Resources

Stars

2 stars

Watchers

3 watching

Forks

Releases

Packages

Used by

Contributors

Languages