@_nu/react-avatar 中文文档教程

发布于 3年前 浏览 24 项目主页 更新于 3年前

@_nu/react-avatar

npm packagenpm downloadsjsdelivrgithub
npm packagenpm downloadsjsdelivrgithub

安装

$ npm install @_nu/react-avatar

二次封装

/* @/components/Avatar/index.js */
import React from 'react';
import { Container, Img, Skeleton } from '@_nu/react-avatar';
import 'sacss';
import './index.css';

const Avatar = ({
  className = '',
  src,
  size,
  placeholder,
  children = null,
}) => {
  return (
    <Container size={size} className={className}>
      <Skeleton />
      <Img src={src} size={size} placeholder={placeholder} />
      {children}
    </Container>
  );
};

export default Avatar;

使用

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 alt="hello" size={24} src={imgAvatar} />
      <Avatar alt="hello" size={32} src={imgAvatar} />
      <Avatar alt="hello" size={40} src={imgAvatar} />
      <Avatar alt="hello" size={40} src="123" placeholder={AvatarDefault} />
      <Avatar alt="hello" src={imgAvatar} />
      <Avatar alt="hello" placeholder={AvatarDefault} />
    </div>
    );
};

export default Page;

接口

属性类型默认值作用
Componentnodei容器组件
childrennode-子元素
classNamestring-class
srcstring-图片地址
altstring.isRequired-图片描述
sizestring | number'40'Avatar 尺寸
placeholdernode | string-图片加载失败
  • size:size={null} 表示头像会撑满整个容器
  • placeholder: string 表示图片加载失败用这个作为占位图,

更多

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文