Avatar
예측 가능한 fallback 콘텐츠와 크기·형태를 제공하는 프로필 이미지예요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
uiSize | md, lg | md |
shape | circle, square | circle |
| parts | Root, Image, Fallback | compound API |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/avatar.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRAvatar } from '@tinyrack/ui/components/avatar';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
이미지 실패 시 대체 콘텐츠 고유 링크
Image 옆에 Fallback을 두면 이미지를 불러오지 못했을 때 알아볼 수 있는 이니셜을 표시해요. 이 data URI는 네트워크 요청 없이 실패를 재현해요.
크기 고유 링크
주변 컨트롤과 정보 밀도에 맞는 크기를 선택하세요.
형태 고유 링크
사람은 circle로, 제품이나 조직 표식은 square로 표현하세요.
API
Root 옵션
| Prop | 타입 | 기본값 | 용도 |
|---|---|---|---|
uiSize | 'md' | 'lg' | 'md' | Avatar 크기를 정해요. |
shape | 'circle' | 'square' | 'circle' | 신원을 나타내는 외곽 형태를 정해요. |
이미지와 fallback
Image는 render, ref, onLoadingStatusChange를 포함한 네이티브 이미지와 Base UI props를 전달해요. 신원을 나타내는 이미지에는 의미 있는 alt 텍스트를 사용하세요. Fallback은 Image가 없거나 실패했을 때 표시돼요. 콘텐츠는 짧고 알아보기 쉽게 유지하고, Image 로딩 중 깜박임을 피하려면 delay를 밀리초 단위로 설정하세요.
합성과 스타일
Root는 Base UI Root props, 상태 기반 className과 style, render, React 19 ref를 전달해요. 컴포넌트 범위 스타일에는 --tr-avatar-size, --tr-avatar-radius, --tr-avatar-background, --tr-avatar-border, --tr-avatar-color, --tr-avatar-font-size, --tr-avatar-font-weight를 재정의하세요.