---
order: 4
title: 头像组
zh-CN: 头像组
en-US: GroupAvatar
---

## zh-CN

+ 默认最多只显示 4 个头像位
+ 超过 4 个头像，最后一个位置为 ...
+ 头像之间堆叠，表意组的暗示
+ 每个头像建议不要增加单独点击的交互行为
+ hover 成员头像，Tooltip 显示成员名称
+ 点击「···」，进入成员列表页



## en-US

+ Only 4 avatars are displayed at most by default
+ The last is ... if there are more then 4 avatars
+ Avatars are overlayed, which implies they are in a group
+ It is not recommended to increase the interaction behavior of individual click for each avatar
+ Show name when hovering avatar
+ Click ... to member list page

````jsx
import Avatar from '../src/index.jsx';

const { GroupAvatar } = Avatar;

const dataSource = [
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011g54c00622f08f679fbbb1b4dbe9a311ec/w/200/h/200',
    text: '成员1',
    id: 1,
  },
  {
    text: '李小鹏',
    id: 2,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011g247aae1f45a5dc1fa6be54048292603b/w/200/h/200',
    text: '成员3',
    id: 3,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011he036f61ebeb2f1e09c0e586b4788a195/w/200/h/200',
    text: '成员4',
    id: 4,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员5',
    id: 5,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员6',
    id: 6,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员7',
    id: 7,
  },{
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011he036f61ebeb2f1e09c0e586b4788a195/w/200/h/200',
    text: '成员8',
    id: 8,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员9',
    id: 9,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '三成员',
    id: 10,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员名字',
    id: 11,
  },
  {
    text: '李小鹏',
    id: 12,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011g247aae1f45a5dc1fa6be54048292603b/w/200/h/200',
    text: '成员3',
    id: 13,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011he036f61ebeb2f1e09c0e586b4788a195/w/200/h/200',
    text: '成员4',
    id: 14,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员5',
    id: 15,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员6',
    id: 16,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员7',
    id: 17,
  },{
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011he036f61ebeb2f1e09c0e586b4788a195/w/200/h/200',
    text: '成员8',
    id: 18,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员9',
    id: 19,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '三成员',
    id: 20,
  },
  {
    img: 'https://teambition-file.alibaba-inc.com/thumbnail/011m5ce75e5b84dbb374b1fbf54413834f98/w/200/h/200',
    text: '成员名字',
    id: 21,
  },
];

const showMemberList = () => {
  console.log('showMemberList');
}

const Demo = () => {
  return (
    <>
      <div className="demo-line">
        <GroupAvatar dataSource={dataSource.slice(0, 3)}/>
      </div>
      <div className="demo-line">
        <GroupAvatar dataSource={dataSource.slice(0, 4)} />
      </div>
      <div className="demo-line">
        <GroupAvatar dataSource={dataSource} onClickMore={showMemberList}/>
        <span style={{marginLeft:'12px'}}>{'showMore为false时，hover无效果'}</span>
      </div>
      <div className="demo-line">
        <GroupAvatar dataSource={dataSource} showMore={true}/>
        <span style={{marginLeft:'12px'}}>{'showMore为true时，hover展示剩余内容'}</span>
      </div>
    </>
  )
}

ReactDOM.render(<Demo />, mountNode);
````

```css
.demo-line {
  margin-bottom: 12px;
}
````