头像组件

@beisen-phoenix/avatar

概述

提供不同尺寸的头像规范，在保持一致性原则的前提下满足不同场景的需求

头像展示运用在系统用户登陆、个人主页、联系方式页面等

API

| 参数 | 说明 | 类型 | 默认值 | 是否必传 | | --- | --- | --- | --- | --- | | size | 头像尺寸 | Size | Size.lg | 否 | | children | 头像里的文字 | string | | 否 | | src | 头像里的图片地址 | string | -- | 否 | | bgColor | 指定背景色，优先级高于userId | string | -- | 否 | | userId | 用户id，根据用户id的最后一位配置颜色 | string|number | -- | 否 | | extraCls | 用户自定义className | string | -- | 否 |

数据格式

enum Size {
  xxsm = 'xxsm',
  xsm = 'xsm',
  sm = 'sm',
  lg = 'lg',
  xlg = 'xlg',
  xxlg = 'xxlg'
}

demo

import React from 'react';
import Avatar, {Size} from '../../src';

export default function App() {
  return (
    <>
      <div>
        <h3>中文名字</h3>
        <Avatar userId="13341">司徒二柱</Avatar>
        <Avatar size={Size.sm} userId="13343">司马建国
        <Avatar size={Size.xxlg} userId="13345">伟大的国明哥一统江湖</Avatar>
        <Avatar size={Size.xsm} userId="13347">南宫无脑</Avatar>
        <Avatar size={Size.xxsm}>小杨同学</Avatar>
        <Avatar size={Size.xlg}>这个名字取的长啊</Avatar>
      </div>
      <div>
        <h3>英文名字</h3>
        <Avatar userId="13341">Raymond Li</Avatar>
        <Avatar size={Size.sm} userId="13343">Donald Trump</Avatar>
        <Avatar size={Size.xxlg} userId="13345">Steve Junior Job</Avatar>
        <Avatar size={Size.xsm} userId="13347">Bill Gates</Avatar>
        <Avatar size={Size.xxsm}>Macheal Jackson</Avatar>
        <Avatar size={Size.xlg}>Bruce Lee</Avatar>
      </div>
    </>
  );
}