Skip to content Shopify logoPolaris

缩略图

Use thumbnails as a visual anchor and identifier for an object. They should be used along with text to provide context.

Use as the default size.

import{缩略图}from'@shopify/polaris';importReactfrom'react';function缩略图Example(){return(<缩略图source="https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg"alt="Black choker necklace"/>);}

Props

Want to help make this feature better? Pleaseshare your feedback.

interface 缩略图Props
size? 'extraSmall'|'small'|'medium'|'large'

Size of thumbnail.

Defaults to'medium'.
source any

URL for the image.
alt string

Alt text for the thumbnail image.
transparent? boolean

Transparent background.

最佳实践

On web, thumbnails should:

  • Be one of 4 sizes:
    • Extra small (24 x 24 px): use in tightly condensed layouts
    • Small (40 × 40 px): use when the medium size is too large for the layout, or when the thumbnail has less importance.
    • Medium (60 × 60 px): use as the default size.
    • Large (80 × 80 px): use when an thumbnail is a major focal point. Avoid this size in lists of like items.

On Android and iOS, thumbnails should:

  • Be one of 2 sizes:
    • Default (40 × 40): use as the default size.
    • Large (72 × 72): use when an thumbnail is a major focal point. Avoid this size in lists of like items.

Content guidelines

Any time you use an image to communicate a concept on Shopify, it’s important to use descriptivealt text. Doing this is important for可访问性because it allows screen readers to describe what’s in the image to people who may not be able to see it.

For thumbnails, we recommend using a format that describes what will show in the image:

  • On web,alt="Photo of {product}". For example, “Photo of black t-shirt with cartoon tiger”.
  • On web, an emptyalt=""attribute ignores the image in assistive technologies such as screen readers, and may be used on decorative thumbnails.
  • On iOS,imageView.accessibilityLabel = "Photo of {product}". For example, “Photo of black t-shirt with cartoon tiger”.
  • On Android,android:contentDescription="Photo of {product}". For example, “Photo of black t-shirt with cartoon tiger”.