Preview
import { Preview } from '@enmovil/ui-design-system';
An image gallery that opens images in a full-screen preview with a toolbar. Images come from imageList, and the toolbar can include a download button.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
imageList | ImageSrc[] | Yes | — | — | Images of the gallery, each shown as a thumbnail that opens the full-screen preview. |
isDownload | boolean | No | — | — | Adds a download button to the preview toolbar, which saves the current image under a timestamp file name. Has no effect when isHideMenu is on. |
isHideMenu | boolean | No | false | — | Replaces the custom toolbar with the standard preview toolbar, which has no download button or title. Defaults to false. |
imageWidth | number | No | 200 | — | Width of each thumbnail in pixels. Defaults to 200. |
isShowTitle | boolean | No | false | — | Shows the current image's title above the toolbar in the preview. Has no effect when isHideMenu is on. |
imageList
An array of objects (ImageSrc). Each object has these fields:
| Field | Type | Required | Description |
|---|---|---|---|
src | string | Yes | Image source of the thumbnail and the preview; also its key, so sources must be unique. The download fetches this URL, so it must allow cross-origin requests. |
title | string | No | Shown above the toolbar while this image is previewed. Requires isShowTitle. |
Events
| Name | Signature | When it fires |
|---|---|---|
onChange | ((current: number, prev: number) => void) | Fires when the preview switches image, with the new and previous indexes. |
onOpenChange | ((open: boolean, current: number) => void) | Fires when the preview opens or closes, with the index of the image shown. |
onDownload | ((src: string) => void) | Fires when the toolbar download button is clicked, before the download starts. |
Children
Preview does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Preview Images example.
Loading playground…
Storybook
Open Preview in Storybook to try every story with the full set of controls.