AvatarList用户头像列表

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

引用方式：

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

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

代码演示

基础样例

Simplest of usage.

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.

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

AvatarList.Item