@beisen-phoenix/avatar
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.55 • Public • Published

    头像组件

    @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>
        </>
      );
    }
     

    Keywords

    none

    Install

    npm i @beisen-phoenix/avatar

    DownloadsWeekly Downloads

    421

    Version

    3.3.55

    License

    ISC

    Unpacked Size

    21.3 kB

    Total Files

    19

    Last publish

    Collaborators

    • beisencorp