Preview
Examples #
JPG Image #
<dt-image-viewer
:image-src="$withBase('/assets/images/test.jpg')"
image-alt="Image Alt Text"
image-button-class="d-wmn-100 d-hmn-100 d-wmx-500 d-hmx-500"
aria-label="Click to open image"
close-aria-label="Close"
/>GIF Image #
<dt-image-viewer
:image-src="$withBase('/assets/images/fry.gif')"
image-alt="Image Alt Text"
image-button-class="d-wmn-100 d-hmn-100 d-wmx-500 d-hmx-500"
aria-label="Click to open image"
close-aria-label="Close"
/>Vue API #
import { DtImageViewer } from '@dialpad/dialtone-vue';Props
Name
|
Default
|
Type
|
|---|---|---|
ariaLabel
required
| string Aria label | |
imageAlt
required
| string Alt text of image | |
imageSrc
required
| string URL of the image to be shown | |
appendTo | 'body' | string 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' |
contentMode |
"light"
|
"dark"
|
"invert"
Applies a color mode to the positioned content element.
| |
imageButtonClass | '' | string Image Class |
open | null |
"null"
|
"true"
|
"false"
Controls whether the image modal is shown. When null (default), the image modal
triggers on click. When set to true or false, the default trigger is
disabled and the parent controls visibility via v-model:open. |
Events
Name
|
Type
|
|---|---|
opened | Boolean Emitted when popover is shown or hidden |
update:open | undefined Event fired to sync the open prop with the parent component |