본문으로 건너뛰기

목록과 표시

AvatarGroup

여러 사람을 겹쳐 표시. 초대 대상이며 참석이 아님.

라이브러리 전용

개요

미리보기

예시 언어동작 줄이기

max

expandable

label

예시

상태

4명 + 외 5명
2명 + 외 7명
펼칠 수 있음

이렇게 · 이렇게 하지 않기

이렇게 하지 않기 일정에서는 “초대된 사람”으로 이름 짓고 “참석자”라고 쓰지 않는다.
이렇게 4명까지 보이고 나머지는 +N으로 둔다.
이렇게 하지 않기 순서는 이름순이며 횟수나 기여로 정렬하지 않는다. 옆에 활동 수·순위를 두지 않는다.

토큰과 속성

이름	타입	기본값	설명
`people`	`readonly { id, name, src? }[]`	—	사람 목록. 컴포넌트가 이름순(Intl.Collator)으로 정렬한다. 미리보기는 9명.
`max?`	`2 \| 3 \| 4`	`4`	“+N” 앞에 보이는 수.
`expandable?`	`boolean`	`false`	“+N”을 버튼으로 만들어 전체 이름을 펼친다.
`label?`	`string`		목록 이름. 비우면 “초대된 사람”. “참석자”라고 쓰지 않는다.
`ref`	—	—	ref는 바깥 <div>로 전달된다.
그 밖의 속성	—	—	id, data-* 등 네이티브 div 속성은 바깥 래퍼로 간다. className·style·children은 받지 않는다.