AvatarList

A list of user's avatar for project or group member list frequently. If a large or small AvatarList is desired, set the size property to either large or small and mini respectively. Omit the size property for a AvatarList with the default size.

Usage:

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

Learning more to visit: Using Pro Components Alone

Examples

Basic Usage

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
);
Max Items to Show

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#

Property Description Type Default
size size of list large、small 、mini, default default
maxLength max items to show number -
excessItemsStyle the excess item style CSSProperties -

AvatarList.Item#

Property Description Type Default
tips title tips for avatar item ReactNode -
src the address of the image for an image avatar string -
Charts