컴포넌트
Avatar Group
겹쳐 쌓인 아바타 그룹이 호버 시 가로로 펼쳐지며 각 아바타에 이름 툴팁이 뜬다. 이니셜/이모지 아바타를 지원하고 최대 표시 개수 초과분은 +N 오버플로 배지로 묶어 숨겨진 인원 이름을 툴팁으로 보여준다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/AvatarGroup-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | AvatarItem[] | 7명 기본 팀 데이터 | 표시할 아바타 목록 (name, content, color). |
| max | number | 4 | 최대 표시 개수. 초과분은 +N 오버플로 배지로 묶음. |
| size | number | 44 | 아바타 지름(px). |
| overlap | number | 14 | 겹침 정도(px). 클수록 더 많이 겹침. |
| expandOnHover | boolean | true | 호버 시 아바타를 가로로 펼칠지 여부. |
| onSelect | (index: number, item: AvatarItem) => void | undefined | 아바타 클릭/키보드 활성화 시 콜백. 지정 시 버튼 역할·포커스 처리. |