SThumbnail <s-thumbnail>

Una pequeña imagen de vista previa de tamaño fijo de un producto o archivo. SThumbnail es el wrapper de Vue 3 tipado del web component <s-thumbnail> de Shopify Polaris.

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

Buenas prácticas

• size="small-200" para los espacios más reducidos. Úsalo solo donde el espacio sea muy limitado.
• size="small" para espacios pequeños. Úsalo cuando la miniatura tenga que caber en un área compacta.
• size="base" por defecto. Empieza por aquí, salvo que el diseño requiera otra cosa.
• size="large" cuando la imagen es el foco. Úsalo cuando la miniatura sea el principal punto de atención.

Consulta las buenas prácticas de Shopify para <s-thumbnail> (en inglés) para ver todas las recomendaciones.

Ejemplo

Las imágenes de abajo se cargan desde picsum.photos, un servicio externo de imágenes de marcador de posición, solo con fines de demostración.

<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	Descripción
alt	string	Una descripción de texto alternativo que describe la imagen para que el lector entienda de qué trata. Es extremadamente útil tanto para los usuarios de tecnologías de asistencia como para los usuarios videntes. Una descripción bien redactada permite a las personas con discapacidad visual participar en el consumo de contenido no textual. Cuando un lector de pantalla encuentra un s-image, la descripción se lee y se anuncia en voz alta. Si una imagen no se carga, posiblemente por una mala conexión, se muestra el alt en pantalla en su lugar. Esto tiene la ventaja de que un comprador vidente sabe que aquí debía cargarse una imagen y, como alternativa, puede seguir consumiendo el contenido textual. Lee las consideraciones al escribir texto alternativo para obtener más información.
loading	"eager" | "lazy"	Determina el comportamiento de carga de la imagen: - eager: carga la imagen de inmediato, independientemente de su posición respecto a la ventana gráfica visible. - lazy: retrasa la carga de la imagen hasta que se acerca a una distancia determinada de la ventana gráfica.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100"	El tamaño de la miniatura del producto. - small-200: el tamaño de miniatura más pequeño, ideal para listas o tablas de productos compactas. - small-100: miniatura muy pequeña, adecuada para diseños densos. - small: miniatura pequeña para contextos con poco espacio. - base: tamaño predeterminado que equilibra visibilidad y aprovechamiento del espacio. - large: miniatura más grande para productos destacados o vistas detalladas. - large-100: miniatura extra grande para una presentación destacada del producto.
src	string	El origen de la imagen (una URL remota o un recurso de archivo local). Mientras la imagen se carga o si no se proporciona src, se muestra un marcador de posición.

Events

Event	Tipo
error	CustomEvent
load	CustomEvent

Escúchalos con listeners del estilo @error en <SThumbnail>.