Image Viewer
Image Viewer lets the user click on an image to see it in a full screen modal.
Preview
Examples #
JPG Image #
<dt-image-viewer
image-src="url/to/image"
image-alt="Image Alt Text"
image-button-class="d-wmn64 d-hmn64 w-wmx332 d-hmx332"
aria-label="Click to open image"
close-aria-label="Close"
/>GIF Image #
<dt-image-viewer
image-src="/url/to/gif"
image-alt="Image Alt Text"
image-button-class="d-wmn64 d-hmn64 w-wmx332 d-hmx332"
aria-label="Click to open image"
close-aria-label="Close"
/>Vue API #
Props
Name
|
Description
|
Default
|
|---|---|---|
ariaLabel
required
| Aria label Type: string | |
imageAlt
required
| Alt text of image Type: string | |
imageSrc
required
| URL of the image to be shown Type: string | |
appendTo | By default the portal appends to the body of the root parent. We can modify this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent. The appendTo prop expects a CSS selector string or an actual DOM node. type: string | HTMLElement, default: 'body' Type: string | 'body' |
imageButtonClass | Image Class Type: string | '' |
open | Controls whether the image modal is shown. Leaving this null will have the image modal trigger on click by default. If you set this value, the default trigger behavior will be disabled and you can control it as you need. Supports .sync modifier Type: booleanValues: nulltruefalse | null |
Events
Name
|
Description
|
|---|---|
opened | Emitted when popover is shown or hidden Type: Boolean |
update:open | Event fired to sync the open prop with the parent component Type: undefined |