Avatar

npm package npm downloads jsdelivr github
npm package npm downloads jsdelivr github

安装

yarn add @_nu/react-avatar @_nu/css-acss

HTML

<nu-avatar data-size="40">
  <nu-avatar-ph />
  <img alt="hello" src="/avatar.717cf745.jpg" width="40" height="40" />
</nu-avatar>

二次封装

/* @components/Avatar/index.js */

import Avatar from "@_nu/react-avatar";
import "@_nu/css-acss";
// custome style
// import './style.css';

export default Avatar;
/* @components/Avatar/style.css */

nu-avatar {
  background-color: #dddddd;
}
nu-avatar[data-size="24"] {
  width: 24px;
}
nu-avatar[data-size="32"] {
  width: 32px;
}
nu-avatar[data-size="40"] {
  width: 40px;
}
nu-avatar[data-size="48"] {
  width: 48px;
}

使用

import React from 'react';
import Avatar from "./components/Avatar";
import imgAvatar from '../avatar.jpg';


const AvatarDefault = ({ className = null }) => (
  <svg
    viewBox="0 0 1024 1024"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
  >
    <path d="M512 64a448 448 0 1 0 448 448A448 448 0 0 0 512 64zm0 160a144 144 0 1 1-144 144 143.68 143.68 0 0 1 144-144zm256 573.44a381.76 381.76 0 0 1-512 0v-18.56A166.4 166.4 0 0 1 416 608h192a166.72 166.72 0 0 1 160 169.92v19.52z" />
  </svg>
);

const Page=()=>{
    return (
     <div>
      <Avatar src={imgAvatar} alt="hello" size={null} />
      <Avatar src={imgAvatar} alt="hello" size={24} />
      <Avatar src={imgAvatar} alt="hello" size={40} />
      <Avatar src={imgAvatar} alt="hello" size={32} />
      <Avatar errorBg={AvatarDefault} src="123" alt="hello" />
     </div>
    );
};

export default Page;

接口

属性 类型 默认值 作用
children node - 子元素
className string - class
src string - 图片地址
alt string.isRequired - 图片描述
size string | number '40' Avatar 尺寸
errorBg string | func | Object - 图片加载失败
  • size:size={null} 表示头像会撑满整个容器
  • errorBg: string 表示图片加载失败用这个作为占位图,

更多

上次更新: 5/17/2020, 1:57:14 PM