1.0.0 • Published 4 years ago

@txdfe/at-text-avatar v1.0.0

Weekly downloads
1
License
ISC
Repository
gitlab
Last release
4 years ago

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

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