SThumbnail <s-thumbnail>

Uma pequena imagem de pré-visualização, de tamanho fixo, de um produto ou arquivo. SThumbnail é o wrapper de Vue 3 tipado do web component <s-thumbnail> do Shopify Polaris.

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

Boas práticas

• size="small-200" para os espaços mais apertados. Recorra a ele apenas onde o espaço for muito limitado.
• size="small" para espaços pequenos. Use quando a miniatura precisar caber em uma área compacta.
• size="base" por padrão. Comece por aqui, a menos que o layout peça outra coisa.
• size="large" quando a imagem for o foco. Use quando a miniatura for o principal ponto de atenção.

Veja as boas práticas da Shopify para <s-thumbnail> (em inglês) para todas as recomendações.

Exemplo

As imagens abaixo são carregadas de picsum.photos, um serviço externo de imagens de placeholder, apenas para fins de demonstração.

<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	Tipo	Descrição
alt	string	Uma descrição em texto alternativo que descreve a imagem para que o leitor entenda do que se trata. É extremamente útil tanto para usuários de tecnologias assistivas quanto para usuários que enxergam. Uma descrição bem escrita permite que pessoas com deficiência visual participem do consumo de conteúdo não textual. Quando um leitor de tela encontra um s-image, a descrição é lida e anunciada em voz alta. Se uma imagem não carregar, possivelmente por causa de uma conexão ruim, o alt é exibido na tela no lugar dela. Isso tem a vantagem de informar a um comprador que enxerga que uma imagem deveria carregar ali e, como alternativa, ele ainda consegue consumir o conteúdo textual. Leia as considerações ao escrever texto alternativo para saber mais.
loading	"eager" | "lazy"	Determina o comportamento de carregamento da imagem: - eager: carrega a imagem imediatamente, independentemente da sua posição em relação à área visível (viewport). - lazy: adia o carregamento da imagem até que ela se aproxime de uma distância especificada da viewport.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100"	O tamanho da imagem em miniatura do produto. - small-200: menor tamanho de miniatura, ideal para listas ou tabelas de produtos compactas. - small-100: miniatura muito pequena, adequada para layouts densos. - small: miniatura pequena para contextos com pouco espaço. - base: tamanho padrão que equilibra visibilidade e uso eficiente do espaço. - large: miniatura maior para produtos em destaque ou visualizações detalhadas. - large-100: miniatura extra grande para exibição de produtos em destaque.
src	string	A origem da imagem (uma URL remota ou um recurso de arquivo local). Enquanto a imagem está carregando ou quando nenhum src é fornecido, um placeholder é renderizado.

Events

Event	Tipo
error	CustomEvent
load	CustomEvent

Escute-os com listeners no estilo @error em <SThumbnail>.