Avatar

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

<HStack spacing={24}> <Avatar size="xs" src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> <Avatar size="sm" src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> <Avatar size="md" src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> <Avatar size="lg" src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> </HStack>

<HStack spacing={24}>
  <Avatar
    size="xs"
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
  <Avatar
    size="sm"
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
  <Avatar
    size="md"
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
  <Avatar
    size="lg"
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
</HStack>

Loading...

How to use

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

Properties

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

Usage

크기

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

<HStack spacing={24}> <Avatar size="xs" src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> <Avatar size="sm" src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> <Avatar size="md" src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> <Avatar size="lg" src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> <Avatar size={100} src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp" alt="avatar" /> </HStack>

<HStack spacing={24}>
  <Avatar
    size="xs"
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
  <Avatar
    size="sm"
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
  <Avatar
    size="md"
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
  <Avatar
    size="lg"
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
  <Avatar
    size={100}
    src="https://cdn.class101.net/images/7776e542-d6db-49c6-b86f-7e93f0cf5425/200x200.webp"
    alt="avatar"
  />
</HStack>

Loading...

플레이스홀더

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

<Avatar size="lg" src="" alt="avatar" />

<Avatar size="lg" src="" alt="avatar" />

Loading...