# @dsyx/text-avatar

> 文字头像组件

Latest version **1.0.1** (published 2021-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dsyx/text-avatar
pnpm add @dsyx/text-avatar
yarn add @dsyx/text-avatar
bun add @dsyx/text-avatar
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-11-19 |
| First published | 2021-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 231 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chaizhou, zhanghee, bruceliu68, dashangyun |
| Keywords | avatar, text-avatar, @dsyx/text-avatar |

## Links

- npm: https://www.npmjs.com/package/@dsyx/text-avatar
- npm.io page: https://npm.io/package/@dsyx/text-avatar

## Dependencies (1)

- [antd](https://npm.io/package/antd.md) ^4.16.13

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-11-19
- 1.0.0 — 2021-10-09

## README

# 文字头像组件

## 安装
```bash
npm i @dsyx/text-avatar --save
```

## 使用
```jsx
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 		| 否 			| -				| 卡片内的头像点击			 	|

---
_Source: https://npm.io/package/@dsyx/text-avatar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._