본문으로 건너뛰기

Avatar

Avatar는 유저를 대표하는 시각적 정보를 나타낼 때 사용되는 컴포넌트입니다.

Loading...

How to use

import { Avatar } from '@vibrant-ui/components';

Properties

PropTypeDefaultDescription
src(*)string-Avatar 이미지의 소스
alt(*)string-Avatar 이미지의 대체 텍스트
size(*)xs | sm | md | lg |number-Avatar의 크기
placeholderstring-src가 로드되지 못한 경우 보여지는 이미지의 소스

Usage

크기

Avatarxs, sm, md, lg의 4단계의 크기를 제공하고 있습니다. 이외의 크기로 사용하고 싶은 경우 number 타입으로 픽셀 크기를 지정할 수 있습니다.

Loading...

플레이스홀더

Avatar는 이미지를 플레이스홀더로 받을 수 있습니다. 아래의 이미지가 기본 플레이스홀더로 표시되며, placeholder 속성을 통해 다른 이미지를 사용할 수 있습니다. 또한, 기본 플레이스홀더는 CustomizationProvider를 통해 다른 이미지로 설정할 수 있습니다. 플레이스홀더는 소스 이미지가 지정되지 않거나, 지정된 소스 이미지가 성공적으로 로드되지 못한 경우 나타납니다.

Loading...
이전
코드베이스