Avatar
Avatar는 사용자가 설정한 프로필 이미지 혹은 텍스트를 UI상에 나타냅니다.V
Property
Shape
Avatar의 모양을 설정합니다.
Size
Avatar의 크기를 설정합니다.
Examples
Fallback
이미지가 없거나 로드에 실패한 경우, alt 텍스트의 첫 글자가 자동으로 표시됩니다. 배경색은 alt 문자열을 기반으로 결정됩니다.
Custom Fallback
FallbackPrimitive에 children을 전달하여 커스텀 fallback 콘텐츠를 표시합니다.
Custom Image
children으로 Avatar.ImagePrimitive와 Avatar.FallbackPrimitive를 전달하면 각 슬롯에 직접 props를 적용할 수 있습니다. src, alt, crossOrigin 등 이미지 관련 props는 Avatar.Root에 전달하면 내부 Primitive로 자동 전달됩니다.
Props Table
Avatar.Root
Avatar.ImagePrimitive와 Avatar.FallbackPrimitive를 하나의 파트로 합쳐 사용자의 프로필 이미지를 표시하고, 이미지가 없거나 불러오지 못하면 alt의 첫 글자를 표시합니다. 이미지나 폴백을 대체하려면 프리미티브를 children으로 전달하거나 imageElement 또는 fallbackElement를 사용하세요. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
shape? | square | circlesquare |
size? | md | smmdlgxl |
onLoadingStatusChange? | - | function |
className? | - | stringfunction |
fallbackElement? | - | ReactElement<AvatarFallbackPrimitive.Props> |
imageElement? | - | ReactElement<AvatarImagePrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
delay? | 0 | number |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Avatar.ImagePrimitive
프로필 사진을 렌더링하는 아바타의 이미지 파트. <img> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Avatar.FallbackPrimitive
아바타 이미지를 불러오지 못했거나 제공되지 않았을 때 이미지 대신 표시되는 폴백. children을 주지 않으면 alt 텍스트의 첫 글자를 alt에서 고른 배경색 위에 표시합니다. <span> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |