Have ideas to improve npm?Join in the discussion! »

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

    4.7.12 • Public • Published

    Avatar 头像

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

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

    基本用法

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

    import ReactDOM from 'react-dom';
    import { Avatar, Icon } from 'uiw';
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    其它类型

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

    import ReactDOM from 'react-dom';
    import { Avatar, Icon } from 'uiw';
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    图片支持

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

    import ReactDOM from 'react-dom';
    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>
      )
    }
    
    ReactDOM.render(<App />, _mount_);

    带徽标的头像

    import ReactDOM from 'react-dom';
    import { Avatar, Badge } from 'uiw';
    
    ReactDOM.render(
      <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>,
      _mount_
    );

    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 -

    Install

    npm i @uiw/react-avatar

    DownloadsWeekly Downloads

    81

    Version

    4.7.12

    License

    MIT

    Unpacked Size

    31.4 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar