AvatarList用户头像列表

一组用户头像，常用在项目/团队成员列表。可通过设置 size 属性来指定头像大小。

引用方式：

import AvatarList from 'ant-design-pro/lib/AvatarList';

详细使用方式请参照：独立使用 pro 组件

代码演示

基础样例

Simplest of usage.

expand codeexpand code
import AvatarList from 'ant-design-pro/lib/AvatarList';

ReactDOM.render(
  <AvatarList size="mini">
    <AvatarList.Item
      tips="Jake"
      src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
    />
    <AvatarList.Item
      tips="Andy"
      src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
    />
    <AvatarList.Item
      tips="Niko"
      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
    />
  </AvatarList>,
  mountNode
);
要显示的最大项目

maxLength attribute specifies the maximum number of items to show while excessItemsStyle style the excess item component.

expand codeexpand code
import AvatarList from 'ant-design-pro/lib/AvatarList';

ReactDOM.render(
  <AvatarList
    size="mini"
    maxLength={3}
    excessItemsStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
  >
    <AvatarList.Item
      tips="Jake"
      src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
    />
    <AvatarList.Item
      tips="Andy"
      src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
    />
    <AvatarList.Item
      tips="Niko"
      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
    />
    <AvatarList.Item
      tips="Niko"
      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
    />
    <AvatarList.Item
      tips="Niko"
      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
    />
    <AvatarList.Item
      tips="Niko"
      src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png"
    />
  </AvatarList>,
  mountNode
);

API#

AvatarList#

参数 说明 类型 默认值
size 头像大小 large、small 、mini, default default
maxLength 要显示的最大项目 number -
excessItemsStyle 多余的项目风格 CSSProperties -

AvatarList.Item#

参数 说明 类型 默认值
tips 头像展示文案 ReactNode -
src 头像图片连接 string -
Charts图表