CoreAvatarGroup

Usage

기본 사용법

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';

<CoreAvatarGroup>
	<CoreAvatar text="F" />
	<CoreAvatar text="E" />
	<CoreAvatar text="A" />
</CoreAvatarGroup>;

최대 표시 개수 설정

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';

<CoreAvatarGroup max={3}>
	<CoreAvatar text="F" />
	<CoreAvatar text="E" />
	<CoreAvatar text="A" />
	<CoreAvatar text="T" />
	<CoreAvatar text="U" />
</CoreAvatarGroup>;

전체 개수와 함께 표시

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';

<CoreAvatarGroup max={4} total={10}>
	<CoreAvatar text="F" />
	<CoreAvatar text="E" />
	<CoreAvatar text="A" />
	<CoreAvatar text="T" />
	<CoreAvatar text="U" />
</CoreAvatarGroup>;

공통 Avatar Props 설정

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';

<CoreAvatarGroup
	max={4}
	avatar={{
		shape: 'circle',
		border: true,
		size: 'md',
	}}
>
	<CoreAvatar src="https://example.com/image1.jpg" />
	<CoreAvatar src="https://example.com/image2.jpg" dot={{ color: 'red' }} />
	<CoreAvatar src="https://example.com/image3.jpg" />
	<CoreAvatar src="https://example.com/image4.jpg" />
	<CoreAvatar src="https://example.com/image5.jpg" />
</CoreAvatarGroup>;

텍스트 아바타 그룹

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';

<CoreAvatarGroup
	max={4}
	avatar={{
		shape: 'circle',
		border: true,
		size: 'md',
	}}
>
	<CoreAvatar text="a-avatar-1" />
	<CoreAvatar text="b-avatar-2" dot={{ color: 'red' }} />
	<CoreAvatar text="c-avatar-3" />
	<CoreAvatar text="d-avatar-4" />
	<CoreAvatar text="e-avatar-5" />
</CoreAvatarGroup>;

정사각형 아바타 그룹

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';

<CoreAvatarGroup
	max={4}
	avatar={{
		shape: 'square',
		border: true,
		size: 'md',
	}}
>
	<CoreAvatar src="https://example.com/image1.jpg" />
	<CoreAvatar src="https://example.com/image2.jpg" dot={{ color: 'red' }} />
	<CoreAvatar src="https://example.com/image3.jpg" />
	<CoreAvatar src="https://example.com/image4.jpg" />
</CoreAvatarGroup>;

커스텀 Surplus 렌더링

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';

<CoreAvatarGroup
  max={4}
  total={1245}
  avatar={{
    shape: 'circle',
    border: true,
    size: 'md',
  }}
  renderSurplus={(number) => <span>-{number}</span>}
>
  <CoreAvatar text="a-avatar-1" shape="square" dot={{ color: 'red' }} />
  <CoreAvatar src="https://example.com/image2.jpg" dot={{ color: 'red' }} />
  <CoreAvatar text="c-avatar-3" shape="square" />
</CoreAvatarGroup>

// K 단위로 표시
<CoreAvatarGroup
  max={4}
  total={1245}
  avatar={{
    shape: 'circle',
    border: true,
    size: 'md',
  }}
  renderSurplus={(number) => <span>+{number?.toString().charAt(0)}K</span>}
>
  <CoreAvatar text="a-avatar-1" />
  <CoreAvatar src="https://example.com/image2.jpg" />
</CoreAvatarGroup>

기본 아이콘과 함께 사용

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';

<CoreAvatarGroup
	max={4}
	total={99}
	avatar={{
		shape: 'circle',
		border: true,
		size: 'md',
		showDefaultIcon: true,
	}}
>
	<CoreAvatar />
	<CoreAvatar dot={{ color: 'red' }} />
	<CoreAvatar />
	<CoreAvatar />
</CoreAvatarGroup>;

다양한 타입 혼합

import { CoreAvatarGroup, CoreAvatar } from '@featuring-corp/components';
import { IconInstagramColored, IconYoutubeColored } from '@featuring-corp/icons';

<CoreAvatarGroup
	max={10}
	total={1245}
	avatar={{
		shape: 'circle',
		border: true,
		size: 'md',
	}}
>
	<CoreAvatar text="a-avatar-1" shape="square" dot={{ color: 'red' }} />
	<CoreAvatar src="https://example.com/image2.jpg" dot={{ color: 'red' }} />
	<CoreAvatar text="c-avatar-3" shape="square" />
	<CoreAvatar text="d-avatar-4" shape="square" statusBadge={{ text: '+99', type: 'filled', status: 'primary' }} />
	<CoreAvatar text="e-avatar-5" iconBadge={{ icon: <IconYoutubeColored /> }} />
	<CoreAvatar dot={{ color: 'black' }} src="https://example.com/image6.jpg" />
	<CoreAvatar
		text="g-avatar-7"
		statusBadge={{ text: '+99', type: 'filled', status: 'primary' }}
		iconBadge={{ icon: <IconInstagramColored /> }}
	/>
</CoreAvatarGroup>;

Props

Prop

Type

CoreAvatarProps

CoreAvatar를 참조하세요.

스타일

기본 스타일 속성

AvatarGroup Container:

display: flex
flex-direction: row
align-items: center

Avatar Overlap

첫 번째가 아닌 아바타에 적용되는 스타일:

margin-left: -8px (겹침 효과)

Surplus Avatar 스타일

max를 초과하는 아바타 개수를 표시하는 Surplus 아바타:

CoreAvatar 컴포넌트와 동일한 스타일 적용
text: +{surplus} 형태로 표시 (renderSurplus로 커스터마이징 가능)
colorType: gray (기본값)

On this page