stdf/docs/mds/components/imagePreview/guide_en.md

Use Cases

ImagePreview component is used for full-screen image preview, supporting gesture zoom, swipe switching and more.

Gesture Operations

• Single finger swipe: Switch images
• Two finger pinch: Zoom image

Navigation Icons

Navigation icons are shown by default for switching images. Use showNavigation prop to hide them, and navigationPosition prop to set position:

• center (default): Vertically centered
• bottom: Bottom position

Image List

The images prop supports two formats:

1. String array (image URLs)

   const images = ['/image1.jpg', '/image2.jpg'];
   

2. Object array (with more info)

   const images = [
   	{ url: '/image1.jpg', alt: 'Image description 1' },
   	{ url: '/image2.jpg', alt: 'Image description 2', thumbnail: '/thumb1.jpg' }
   ];
   

Indicator Types

• number: Number indicator, shows current index and total
• dot: Dot indicator
• null: Hide indicator

Custom Content

Use children Snippet to customize the content area below the image, commonly used for image descriptions, action buttons, etc.

Close Methods

• Click close button: shown when closable={true}
• Click mask: works when maskClosable={true} (disabled by default)

Notes

• Component prevents default page scroll behavior
• Clicking mask won't close preview when zoomed
• Recommended to use with ImageList component