Avatar

사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타내고자 할 때 사용합니다.
TypescriptWAI-ARIA
Anatomy

아바타를 구성하는 요소를 설명합니다.

AnatomyImage
Rules of Use
  • RulesOfUseImage
    Variation

    사용자의 이미지를 담은 이미지 타입과, 사용자의 이미지가 존재하지 않을 때 제공하는 이니셜 타입 두 가지를 사용할 수 있습니다. 이니셜 타입 색상은 GDS Color Token 하에 자유롭게 사용 가능하나, 가독성을 고려하여 채도가 높고 명도가 낮은 색상을 권장합니다.

  • RulesOfUseImage
    Alignment

    라벨과 함께 아바타를 제공할 때는 기준 마진 8px을 사용합니다. 아바타와 라벨은 서로 수평에 위치해야 합니다.

  • RulesOfUseImage
    Badge option

    세 가지의 배지 옵션을 사이즈와 무관하게 사용할 수 있습니다. 아이콘은 쓰임에 따라 변경 가능합니다.

Import
import { Avatar } from '@goorm-dev/vapor-components';
Examples
Props
namedescriptiondefault
className

Avatar 컴포넌트의 클래스명을 지정합니다.

string
id

Avatar 컴포넌트를 감싸는 button의 id를 지정합니다.

string
name

프로필 이미지를 대체할 텍스트를 지정합니다.

string
maxInitials

이름의 이니셜을 생성할 때 사용되는 문자의 최대 개수를 설정하는 데 사용됩니다. 예를 들어, maxInitials가 2로 설정되고 이름이 `Foo Bar Var`인 경우, 이니셜은 `FB`가 됩니다. 이는 이름의 첫 두 단어인 `Foo`와 `Bar`의 첫 글자를 가져와 생성된 것입니다.

number
2
fgColor

텍스트의 색상을 지정합니다.

string
#fff
size

Avatar 컴포넌트의 크기를 지정합니다.

xllgmdsm
md
textSizeRatio

아바타의 전체 크기(size)에 대한 텍스트 크기의 비율을 나타냅니다. 즉, 텍스트 크기는 전체 아바타 크기를 textSizeRatio로 나눈 값으로 계산됩니다(size / textSizeRatio).

number
0
textMarginRatio

아바타의 전체 크기(size)에 대한 텍스트 마진의 비율을 나타냅니다. 즉, 텍스트 마진은 전체 아바타 크기와 textMarginRatio의 곱으로 계산됩니다(size * textMarginRatio). 이 마진은 텍스트가 항상 아바타 내부에 맞게 들어갈 수 있도록 하는 데 사용됩니다. 예를 들어, 아바타의 전체 크기가 100이고 textMarginRatio가 0.1이라면, 텍스트와 아바타의 가장자리 사이의 마진은 10이 됩니다

0.15
round

아바타의 모서리를 둥글게 할지 여부를 지정합니다.

boolean
true
src

아바타의 이미지 URL을 지정합니다.

string
onClickClose

아바타의 닫기 버튼을 클릭했을 때 실행되는 함수를 지정합니다.

function
onClickAvatar

아바타를 클릭했을 때 실행되는 함수를 지정합니다.

function
BottomIcon

아바타 아래에 표시되는 아이콘을 지정합니다.

IconType
RightIcon

아바타 오른쪽에 표시되는 아이콘을 지정합니다.

IconType