SThumbnail <s-thumbnail>
상품이나 파일을 보여 주는 작은 고정 크기 미리보기 이미지입니다. SThumbnail은(는) Shopify Polaris <s-thumbnail> web component를 위한 타입이 지정된 Vue 3 wrapper입니다.
ts
import { SThumbnail } from 'polaris-vue-elements'모범 사례
- 가장 좁은 공간에는
size="small-200"을 사용하세요. 공간이 매우 제한된 곳에서만 사용합니다. - 작은 공간에는
size="small"을 사용하세요. 썸네일을 좁은 영역에 맞춰 넣어야 할 때 사용합니다. - 기본으로는
size="base"를 사용하세요. 레이아웃에 다른 크기가 필요하지 않다면 여기서 시작합니다. - 이미지가 중심일 때는
size="large"를 사용하세요. 썸네일이 주목의 중심일 때 사용합니다.
전체 가이드는 <s-thumbnail>에 대한 Shopify 모범 사례(영어)를 참고하세요.
예시
아래 이미지는 서드파티 플레이스홀더 이미지 서비스인 picsum.photos에서 불러오며, 데모용으로만 사용됩니다.
vue
<script setup>
import { SThumbnail } from 'polaris-vue-elements'
</script>
<template>
<SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="small" />
<SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="base" />
<SThumbnail src="https://picsum.photos/seed/polaris-thumb/100" alt="Product photo" size="large" />
<!-- No src: renders a placeholder -->
<SThumbnail alt="Product photo not yet uploaded" size="base" />
</template>Props
| Prop | 타입 | 설명 |
|---|---|---|
alt | string | 이미지가 무엇에 관한 것인지 이해할 수 있도록 이미지를 설명하는 대체 텍스트입니다. 보조 기술 사용자와 비장애 사용자 모두에게 매우 유용합니다. 잘 작성된 설명은 시각 장애가 있는 사람도 텍스트가 아닌 콘텐츠를 이용할 수 있게 해 줍니다. 스크린 리더가 s-image를 만나면 이 설명을 소리 내어 읽습니다. 연결 상태가 좋지 않은 등의 이유로 이미지를 불러오지 못하면 대신 alt가 화면에 표시됩니다. 덕분에 화면을 보는 구매자도 이곳에 이미지가 표시될 예정이었음을 알 수 있고, 대신 텍스트 콘텐츠를 이용할 수 있습니다. 자세한 내용은 대체 텍스트 작성 시 고려 사항을 참고하세요. |
loading | "eager" | "lazy" | 이미지의 로딩 동작을 결정합니다. - eager: 보이는 뷰포트 내 위치와 관계없이 이미지를 즉시 불러옵니다. - lazy: 이미지가 뷰포트로부터 지정된 거리에 가까워질 때까지 로딩을 지연합니다. |
size | "base" | "small-200" | "small-100" | "small" | "large" | "large-100" | 상품 썸네일 이미지의 크기입니다. - small-200: 가장 작은 썸네일 크기로, 컴팩트한 상품 목록이나 테이블에 적합합니다. - small-100: 매우 작은 썸네일로, 밀도 높은 레이아웃에 적합합니다. - small: 공간이 제한된 컨텍스트를 위한 작은 썸네일입니다. - base: 가시성과 공간 효율의 균형을 맞춘 기본 크기입니다. - large: 추천 상품이나 상세 보기를 위한 큰 썸네일입니다. - large-100: 상품을 눈에 띄게 표시하기 위한 아주 큰 썸네일입니다. |
src | string | 이미지 소스(원격 URL 또는 로컬 파일 리소스)입니다. 이미지가 로드 중이거나 src가 제공되지 않으면 플레이스홀더가 렌더링됩니다. |
Events
| Event | 타입 |
|---|---|
error | CustomEvent |
load | CustomEvent |
<SThumbnail>에서 @error 형식의 리스너로 이 events를 수신하세요.