SThumbnail <s-thumbnail>

Une petite image d'aperçu de taille fixe pour un produit ou un fichier. SThumbnail est le wrapper Vue 3 typé du web component <s-thumbnail> de Shopify Polaris.

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

Bonnes pratiques

• size="small-200" pour les espaces les plus restreints. Ne l'utilisez que là où la place est très limitée.
• size="small" pour les petits espaces. Utilisez-la lorsque la miniature doit tenir dans une zone compacte.
• size="base" par défaut. Commencez par celle-ci, sauf si la mise en page exige autre chose.
• size="large" lorsque l'image est au centre. Utilisez-la lorsque la miniature est le principal point d'attention.

Consultez les bonnes pratiques de Shopify pour <s-thumbnail> (en anglais) pour l'ensemble des recommandations.

Exemple

Les images ci-dessous sont chargées depuis picsum.photos, un service tiers d'images de remplacement, uniquement à des fins de démonstration.

<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	Type	Description
alt	string	Une description textuelle alternative de l'image, permettant au lecteur de comprendre ce qu'elle représente. Elle est extrêmement utile aussi bien aux utilisateurs de technologies d'assistance qu'aux utilisateurs voyants. Une description bien rédigée permet aux personnes malvoyantes d'accéder au contenu non textuel. Lorsqu'un lecteur d'écran rencontre un s-image, la description est lue et annoncée à voix haute. Si une image ne se charge pas, par exemple à cause d'une mauvaise connexion, l'alt s'affiche à l'écran à la place. Un acheteur voyant sait ainsi qu'une image devait se charger à cet endroit, tout en pouvant consulter le contenu textuel. Lisez les points à considérer pour rédiger un texte alternatif pour en savoir plus.
loading	"eager" | "lazy"	Détermine le comportement de chargement de l'image : - eager : charge l'image immédiatement, quelle que soit sa position dans la zone d'affichage visible. - lazy : retarde le chargement de l'image jusqu'à ce qu'elle s'approche à une distance donnée de la zone d'affichage.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100"	La taille de la miniature du produit. - small-200 : la plus petite miniature, idéale pour les listes de produits compactes ou les tableaux. - small-100 : très petite miniature, adaptée aux mises en page denses. - small : petite miniature pour les contextes où l'espace est limité. - base : taille par défaut qui équilibre visibilité et gain de place. - large : miniature plus grande pour les produits mis en avant ou les vues détaillées. - large-100 : très grande miniature pour un affichage proéminent du produit.
src	string	La source de l'image (une URL distante ou une ressource de fichier locale). Pendant le chargement de l'image ou si aucun src n'est fourni, un placeholder est affiché.

Events

Event	Type
error	CustomEvent
load	CustomEvent

Écoutez-les avec des listeners de la forme @error sur <SThumbnail>.