SThumbnail <s-thumbnail>

Ein kleines Vorschaubild fester Größe für ein Produkt oder eine Datei. SThumbnail ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-thumbnail>.

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

Best Practices

• size="small-200" für die engsten Stellen. Verwenden Sie es nur, wo der Platz sehr begrenzt ist.
• size="small" für kleine Flächen. Verwenden Sie es, wenn das Thumbnail in einen kompakten Bereich passen muss.
• size="base" als Standard. Beginnen Sie hiermit, sofern das Layout nichts anderes verlangt.
• size="large", wenn das Bild im Mittelpunkt steht. Verwenden Sie es, wenn das Thumbnail der Hauptblickfang ist.

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-thumbnail> (auf Englisch).

Beispiel

Die folgenden Bilder werden zu reinen Demozwecken von picsum.photos geladen, einem Platzhalterbild-Dienst eines Drittanbieters.

<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	Typ	Beschreibung
alt	string	Eine alternative Textbeschreibung des Bildes, damit Leser verstehen, worum es geht. Sie ist sowohl für Nutzer assistiver Technologien als auch für sehende Nutzer äußerst nützlich. Eine gut geschriebene Beschreibung ermöglicht Menschen mit Sehbehinderungen, an Nicht-Text-Inhalten teilzuhaben. Trifft ein Screenreader auf ein s-image, wird die Beschreibung laut vorgelesen. Kann ein Bild nicht geladen werden, etwa wegen einer schlechten Verbindung, wird stattdessen der alt-Text auf dem Bildschirm angezeigt. So erkennt ein sehender Käufer, dass hier ein Bild geladen werden sollte, und kann alternativ dennoch den Textinhalt erfassen. Mehr dazu unter Hinweise zum Schreiben von Alternativtexten.
loading	"eager" | "lazy"	Bestimmt das Ladeverhalten des Bildes: - eager: Lädt das Bild sofort, unabhängig von seiner Position im sichtbaren Viewport. - lazy: Verzögert das Laden des Bildes, bis es sich dem Viewport auf eine bestimmte Entfernung nähert.
size	"base" | "small-200" | "small-100" | "small" | "large" | "large-100"	Die Größe des Produkt-Thumbnails. - small-200: Kleinste Thumbnail-Größe, ideal für kompakte Produktlisten oder Tabellen. - small-100: Sehr kleines Thumbnail, geeignet für dichte Layouts. - small: Kleines Thumbnail für Kontexte mit wenig Platz. - base: Standardgröße, die Sichtbarkeit und Platzbedarf ausbalanciert. - large: Größeres Thumbnail für hervorgehobene Produkte oder Detailansichten. - large-100: Sehr großes Thumbnail für eine prominente Produktdarstellung.
src	string	Die Bildquelle (entweder eine Remote-URL oder eine lokale Dateiressource). Während das Bild lädt oder wenn kein src angegeben ist, wird ein Platzhalter gerendert.

Events

Event	Typ
error	CustomEvent
load	CustomEvent

Auf diese Events lauschen Sie mit Listenern im Stil von @error auf <SThumbnail>.