아바타
아바타 컴포넌트는 사용자의 정체성을 이미지, 아이콘 또는 텍스트로 시각적으로 나타냅니다.
Import
import { Avatar } from 'podo-ui';Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'image' | 'icon' | 'text' | 'icon' | 아바타 유형 (image, icon, text) |
src | string | - | 이미지 소스 URL (type='image'일 때) |
icon | string | 'icon-user' | 아이콘 클래스명 (type='icon'일 때) |
text | string | - | 텍스트 내용, 첫 2글자만 표시 (type='text'일 때) |
size | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 56 | 아바타 크기(픽셀) |
activityRing | boolean | false | 활동 상태를 나타내는 액티비티 링 표시 |
alt | string | 'Avatar' | 이미지 접근성을 위한 대체 텍스트 |
onClick | () => void | - | 클릭 이벤트 핸들러 |
개요
아바타는 사용자의 정체성을 시각적으로 나타내는 UI 컴포넌트입니다. 프로필 이미지, 시스템 아이콘, 이니셜을 지원하며, 활동 상태를 나타내는 액티비티 링을 추가할 수 있습니다.
React
import { Avatar } from 'podo-ui';
// Image avatar
<Avatar type="image" src="/profile.jpg" size={56} />
// Icon avatar (default)
<Avatar type="icon" icon="icon-user" size={56} />
// Text avatar
<Avatar type="text" text="AB" size={56} />
// With activity ring
<Avatar type="image" src="/profile.jpg" size={56} activityRing />기본 예제
AB
유형
아바타는 세 가지 유형을 지원합니다: 이미지, 아이콘, 텍스트
이미지 유형
아이콘 유형
텍스트 유형
AB
CD
EF
GH
IJ
크기
아바타는 16px부터 56px까지 9가지 크기를 제공합니다.
모든 크기
액티비티 링
액티비티 링은 사용자가 현재 활동 중인지를 나타냅니다. 활동이 없을 경우 기본 상태로 표시됩니다.
기본 상태
활동 상태