SAvatar <s-avatar>

사람이나 비즈니스의 이미지를 보여 주며, 이미지가 없으면 이니셜을 표시합니다. SAvatar은(는) Shopify Polaris <s-avatar> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.

import { SAvatar } from 'polaris-vue-elements'

모범 사례

• 맥락에 맞게 크기를 정하세요. 표나 목록처럼 밀도가 높은 레이아웃에서는 더 작은 size를, 사람이 중심이 되는 프로필 페이지에서는 더 큰 값을 고릅니다.
• 유용한 대체 텍스트를 작성하세요. alt에는 사람이나 회사 이름처럼 아바타가 나타내는 대상을 지정합니다. 그 이름이 이미 아바타 옆에 텍스트로 표시된다면 빈 alt를 사용합니다.
• 나타내는 대상 바로 옆에 두세요. 아바타를 해당 이름이나 항목 바로 옆에 배치해 목록, 표, 카드에서 둘의 연결이 분명하게 드러나도록 합니다.

<SAvatar alt="Sarah Chen" initials="SC" size="large" />

전체 가이드는 <s-avatar>에 대한 Shopify 모범 사례(영어)를 참고하세요.

예시

아래 이미지는 서드파티 플레이스홀더 이미지 서비스인 picsum.photos에서 불러오며, 데모용으로만 사용됩니다.

<script setup>
import { SAvatar } from 'polaris-vue-elements'
</script>

<template>
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="small" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="base" />
  <SAvatar src="https://picsum.photos/seed/polaris-avatar/200" alt="Photo of a customer" size="large" />

  <!-- No src: falls back to initials -->
  <SAvatar initials="AL" alt="Ada Lovelace" size="large" />
</template>

Props

Prop	타입	설명
alt	string	접근성을 위해 아바타를 설명하는 대체 텍스트입니다. 보조 기술 사용자에게 아바타에 대한 텍스트 설명을 제공하고, 아바타를 불러오지 못했을 때 대체 콘텐츠 역할을 합니다. 잘 작성된 설명은 시각 장애가 있는 사용자가 텍스트가 아닌 콘텐츠를 이해할 수 있게 해 줍니다. 스크린 리더는 아바타를 만나면 이 설명을 소리 내어 읽습니다. 아바타를 불러오지 못하면 이 텍스트가 화면에 표시되어 모든 사용자가 어떤 콘텐츠가 의도되었는지 이해할 수 있습니다. 효과적인 대체 텍스트 작성법과 alt 속성에 대해 자세히 알아보세요.
initials	string	이미지가 제공되지 않거나 로드에 실패했을 때 아바타에 표시할 이니셜입니다. 일반적으로 사람의 이름과 성의 이니셜을 나타내는 한두 글자이며, 예를 들어 John Doe의 경우 "JD"입니다.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200"	아바타 이미지의 크기입니다. - small-200: 아주 작은 아바타로, 컴팩트한 화면이나 항목이 많은 목록에 적합합니다. - small-100: small의 별칭입니다. - small: 작은 아바타로, 보조 컨텍스트나 좁은 레이아웃에 적합합니다. - base: 대부분의 컨텍스트에서 잘 작동하는 기본 크기입니다. - large: 강조하거나 아바타가 초점이 될 때 사용하는 큰 아바타입니다. - large-100: large의 별칭입니다. - large-200: 눈에 띄게 표시하기 위한 아주 큰 아바타입니다.
src	string	아바타 이미지의 URL 또는 경로입니다. 지정하면 이미지가 initials보다 우선합니다. 이미지를 불러오지 못하거나 느리게 로드되면 대신 initials가 렌더링됩니다.

Events

Event	타입
error	Event
load	Event

<SAvatar>에서 @error 형식의 리스너로 이 events를 수신하세요.