@_nu/react-avatar 中文文档教程
@_nu/react-avatar
npm package | npm downloads | jsdelivr | github |
---|---|---|---|
安装
$ 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;
接口
属性 | 类型 | 默认值 | 作用 |
---|---|---|---|
Component | node | i | 容器组件 |
children | node | - | 子元素 |
className | string | - | class |
src | string | - | 图片地址 |
alt | string.isRequired | - | 图片描述 |
size | string | number | '40' | Avatar 尺寸 |
placeholder | node | string | - | 图片加载失败 |
- size:
size={null}
表示头像会撑满整个容器 - placeholder:
string
表示图片加载失败用这个作为占位图,
更多
更多
你可能也喜欢
- 3d-flip-book 中文文档教程
- @4geit/swg-mock-data-helper 中文文档教程
- @500px_info/graphql-query-complexity 中文文档教程
- @9softstudio/react-datepicker 中文文档教程
- @_pearofducks/require-extension-hooks-vue 中文文档教程
- @abcum/ember-select 中文文档教程
- @ac-ui/react-components 中文文档教程
- @acaprojects/a2-widgets 中文文档教程
- @accept-banano/client 中文文档教程
- @acme-ui/icons 中文文档教程