@txdfe/at-text-avatar

1.0.0 • Public • Published

at-text-avatar


简介

根据文字生成头像,类似钉钉、gitlab首页效果

使用示例

萨波

import TextAvatar from '@txdfe/at-text-avatar';

class Demo extends React.Component {
  render() {
    return (
      <TextAvatar
        image={user.avatar_url}
        text={user.nickname || user.name}
      />
    );
  }
}

ReactDOM.render(<Demo />, mountNode);

API

参数 类型 可选值 默认值 是否必填 说明
text String 用作头像的文字,默认截取第一个字符作为头像(可通过sliceFrom和sliceLength调整)
image String 图片地址。当传入此参数时,组件将优先使用此参数将头像渲染成图片,为空时才使用text参数渲染成文字
size String xl, large, medium, small, xs medium 有5种可选尺寸,大小依次为:24px、28px、36px、48px,64px 默认尺寸为medium
radius String 100% 显示头像的圆角度数,默认值为100%
cover Boolean true,false false 头像圆角为4px,fontSize为20px,fontWeight为500
sliceFrom String head, end head 截取文字的方向,默认从词首开始截取,如『萨波』将截取『萨』
sliceLength Number 1 截取文字的长度,默认截取1个字符。不建议截取超过2个字符
href String 传这个参数时,头像将变成一个a标签,点击跳转的链接为传入的值
isTargetBlank Bool true, false true 指定a标签是否新标签页打开(需要与href参数一起使用)
className String 添加到组件上的className
needAddedText Boolean true,false false 是否需要在头像后面展示 text

Readme

Keywords

none

Package Sidebar

Install

npm i @txdfe/at-text-avatar

Weekly Downloads

11

Version

1.0.0

License

ISC

Unpacked Size

58.5 kB

Total Files

14

Last publish

Collaborators

  • jiangyuanzhi
  • zhzxang
  • purple-force
  • zuoqi
  • tod.zx
  • 2ehao
  • bowei.jbw
  • teamaxy
  • cyris
  • saviio