Components
Avatar
사용자 프로필 이미지나 아이콘을 원형으로 표시하는 컴포넌트입니다. 사용자를 시각적으로 식별하고 개인화된 경험을 제공할 때 사용됩니다.
개요
옵션 테이블 (Avatar)
| 속성 | 값 | 기본값 |
|---|---|---|
| size | 20, 24, 36, 48, 64, 80, 96 |
개요
옵션 테이블 (Avatar Stack)
| 속성 | 값 | 기본값 |
|---|---|---|
| size | 20, 24, 36, 48, 64 |
스펙 (Avatar)
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | cornerRadius | |
| strokeColor |
size=20
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 20px |
| strokeWidth | 1px |
size=24
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 24px |
| strokeWidth | 1px | ||
| badgeMask | offset | 14px | |
| size | 12px | ||
| badge | offset | 15px | |
| size | 10px |
size=36
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 36px |
| strokeWidth | 1px | ||
| badgeMask | offset | 20px | |
| size | 18px | ||
| badge | offset | 22px | |
| size | 14px |
size=42
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 42px |
| strokeWidth | 1px | ||
| badgeMask | offset | 24px | |
| size | 20px | ||
| badge | offset | 26px | |
| size | 16px |
size=48
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 48px |
| strokeWidth | 1px | ||
| badgeMask | offset | 28px | |
| size | 22px | ||
| badge | offset | 30px | |
| size | 18px |
size=64
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 64px |
| strokeWidth | 1px | ||
| badgeMask | offset | 40px | |
| size | 26px | ||
| badge | offset | 42px | |
| size | 22px |
size=80
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 80px |
| strokeWidth | 1px | ||
| badgeMask | offset | 52px | |
| size | 32px | ||
| badge | offset | 54px | |
| size | 28px |
size=96
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 96px |
| strokeWidth | 1px | ||
| badgeMask | offset | 62px | |
| size | 38px | ||
| badge | offset | 65px | |
| size | 32px |
size=108
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | size | 108px |
| strokeWidth | 1px | ||
| badgeMask | offset | 70px | |
| size | 44px | ||
| badge | offset | 74px | |
| size | 36px |
스펙 (Avatar Stack)
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | item | cornerRadius | |
| strokeColor |
size=20
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -5px |
| item | strokeWidth | 1px |
size=24
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -6px |
| item | strokeWidth | 1px |
size=36
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -8px |
| item | strokeWidth | 2px |
size=42
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -10px |
| item | strokeWidth | 2px |
size=48
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -12px |
| item | strokeWidth | 2px |
size=64
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -16px |
| item | strokeWidth | 3px |
size=80
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -20px |
| item | strokeWidth | 4px |
size=96
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -24px |
| item | strokeWidth | 5px |
size=108
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | root | gap | -27px |
| item | strokeWidth | 5px |
Last updated on