Skip to content
On this page

VDialog

Props

NameTypeDescription
aria-currentEnum:
page
step
location
date
time
true
false
Indicates the element that represents the current item within a container or set of related elements.
openbooleanIndicates dialog's state
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1208 more ...
undefined See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-placementEnum:
top
side
subtitlestring
headlinestring
full-width-bodyboolean
aria-labelstring
dismiss-button-aria-labelstring
no-light-dismissboolean
modalbooleanControls whether the dialog is modal.

Events

NameEvent TypeDescription
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
blurFocusEventFires when the element loses focus.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.
inputEventFires when the value of an element has been changed.
openCustomEvent<undefined>The open event fires when the dialog opens.
closeCustomEvent<string>The close event fires when the dialog closes (either via user interaction or via the API). It returns the return value inside the event's details property.

Slots

NameDescription
graphicUse the graphic slot in order to replace the icon.
bodyUse the body slot in order to add custom HTML to the dialog.
footerUse the footer slot in order to add action buttons to the bottom of the dialog.
mainAssign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
action-itemsUse the action-items slot in order to add action buttons to the bottom of the dialog.

Methods

NameTypeDescription
close() => unknown
show() => unknown
showModal() => unknown