SThumbnail `<s-thumbnail>`

商品やファイルを表す、固定サイズの小さなプレビュー画像。 SThumbnail は、Shopify Polaris の <s-thumbnail> web component 向けの型付き Vue 3 wrapper です。

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 形式のリスナーで受け取れます。

SThumbnail <s-thumbnail> ​

ベストプラクティス ​

例 ​

Props ​

Events ​

SThumbnail `<s-thumbnail>`

ベストプラクティス

例

Props

Events