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

4.22.3 • Public • Published

Avatar 头像

Buy me a coffee Open in unpkg NPM Downloads npm version

用来代表用户或事物,支持图片、图标或字符展示。

import { Avatar } from 'uiw';
// or
import Avatar from '@uiw/react-avatar';

基本用法

头像有四种尺寸,两种形状可选。

import React from 'react';
import { Avatar, Icon } from 'uiw';

export default function Demo() {
  return (
    <div>
      <div style={{ paddingBottom: 20 }}>
        <Avatar size="large" icon={<Icon type="user"/>} />
        <Avatar icon="user" />
        <Avatar size="small" icon="user" />
        <Avatar size="mini" icon={<Icon type="user"/>} />
      </div>
      <div>
        <Avatar shape="square" size="large" icon="user" />
        <Avatar shape="square" icon="user" />
        <Avatar shape="square" size="small" icon="user" />
        <Avatar shape="square" size="mini" icon="user" />
      </div>
    </div>
  )
}

其它类型

支持三种类型:Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。

import React from 'react';
import { Avatar, Icon } from 'uiw';

export default function Demo() {
  return (
    <div>
      <Avatar icon={<Icon type="user"/>} />
      <Avatar>U</Avatar>
      <Avatar src="https://avatars2.githubusercontent.com/u/1680273?s=40&v=4" />
      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
      <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
    </div>
  )
}

图片支持

在组件上使用onError事件,处理显示错误的图片。

import React from 'react';
import { Avatar, Icon } from 'uiw';

const App = () => {
  const [src, setSrc] = React.useState('https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4')
  return (
    <div>
      <Avatar
        src='https://avatars2.githubusercontent.com/ua/1680273?s=40&v=4'
        onError={(e) => {
          if (e) {
            e.target.src = 'https://avatars2.githubusercontent.com/u/1680275?s=40&v=4'
          }
          return false;
        }}
      />
      <Avatar
        src={src}
        onError={(e) => {
          if (e) {
            setSrc('https://avatars2.githubusercontent.com/u/1680275?s=40&v=4');
          }
        }}
      />
    </div>
  )
}

export default App;

带徽标的头像

import React from 'react';
import { Avatar, Badge } from 'uiw';

export default function Demo() {
  return (
    <div>
      <span style={{ marginRight: 24 }}>
        <Badge count={1}><Avatar shape="square" icon="user" /></Badge>
      </span>
      <span>
        <Badge dot><Avatar shape="square" icon="user" /></Badge>
      </span>
    </div>
  )
}

Props

参数 说明 类型 默认值
icon 设置头像的图标类型,参考 Icon 组件 String、ReactNode -
shape 指定头像的形状 square 正方形或者 circle Enum{'circle', 'square' } -
size 设置头像的大小 Enum{ 'large', 'small','mini', 'default' } default
src 图片类头像的资源地址 String -
alt 规定图像的替代文本 String -
onError 图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为 () => boolean -

Package Sidebar

Install

npm i @uiw/react-avatar

Weekly Downloads

223

Version

4.22.3

License

MIT

Unpacked Size

17.2 kB

Total Files

13

Last publish

Collaborators

  • uiwjs
  • wcjiang