아바타
로고가 있으면 로고, 없으면 색 이니셜 원이에요. 단지·지역 아바타가 이걸 써요.
고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 로고 아니면 색 이니셜 원 - 단지·지역·방문 순서까지.
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
해부도#
- 1
원
color를 14%로 깐 원이에요.
- 2
이니셜
지름의 42% 크기, 굵기 800이에요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
Avatar#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| url | - | string | |
| initial* | - | string | |
| color* | - | string | |
| size | 32 | number | 크기예요. |
| imgScale | - | number | |
| pending | - | boolean | |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
Avatar#
base
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | pending | 모서리 | 완전 원(9999px) |
| logo | 모서리 | 완전 원(9999px) | |
| logo-img | 크기 | 100% | |
| 전환 대상 | 투명도 | ||
| 시간 | 200ms | ||
| initial | 모서리 | 완전 원(9999px) | |
| 굵기 | 800 | ||
| 크기 | size(기본 34px) | ||
| 배경색 | color 14% | ||
| 글자색 | color | ||
| 글자 크기 | size × 0.42 | ||
| logo-img | 배경색 | #ffffff |
값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.
접근성#
가이드라인#
이렇게 써요#
문구#
- 이니셜은 이름의 첫 글자 하나예요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요. |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |