Dialog API

This page provides an overview of the Dialog component API, detailing its props, emits, slots, and exposed methods/states.

Props

The Dialog component accepts the following props:

Prop	Default	Type	Description
`modelValue`	`false`	`boolean`	Controls the visibility of the dialog.
`size`	`"2xl"`	`Size` or `undefined`	The size of the dialog, which determines its width.
`position`	`"center"`	`PositionShort` or `undefined`	The position of the dialog on the screen.
`notAnimate`	`false`	`boolean` or `undefined`	Disables animations for the dialog.
`closeButton`	`false`	`boolean` or `undefined`	Enables a close button inside the dialog.
`withoutMargin`	`false`	`boolean` or `undefined`	Removes the default margin inside the dialog.
`notCloseBackground`	`false`	`boolean` or `undefined`	Prevents closing the dialog when clicking the background.
`toTeleport`	`"body"`	`string` or `undefined`	Specifies the target element to teleport the dialog.
`class`	`""`	`StyleClass` or `undefined`	Custom CSS class for the dialog container.
`classBody`	`""`	`StyleClass` or `undefined`	Custom CSS class for the dialog body.

The Dialog component provides the following slots:

Slot	Payload	Description
`default`	`{ closeDialog(): void }`	A slot for providing the main content of the dialog. Includes a method to close the dialog.
`background`	None	A slot for customizing the dialog's background. If left empty, the background will be transparent.

The Dialog component emits the following events:

Event	Payload	Description
`update:modelValue`	`boolean`	Emitted when the `modelValue` is updated, indicating the visibility state of the dialog.

The Dialog component exposes the following methods and states via ref:

Expose	Value	Description
`toTeleport`	`string`	The teleport target for the dialog.
`isOpen`	`boolean`	Indicates whether the dialog is open.
`size`	`string`	The current size of the dialog.
`isCloseButton`	`boolean`	Indicates whether the close button is enabled.
`notCloseBackground`	`boolean`	Indicates whether the background click closes the dialog.
`withoutMargin`	`boolean`	Indicates whether the dialog has margins removed.
`position`	`string`	The current position of the dialog.
`classBodyDialog`	`StyleClass`	The CSS class for the body of the dialog.
`classPosition`	`StyleClass`	The CSS class for the dialog's position styling.
`classBase`	`StyleClass`	The base CSS class for the dialog container.
`classDialog`	`StyleClass`	The CSS class for the dialog itself.
`closeDialog`	`() => void`	Closes the dialog.

The size prop accepts the following values to define the width of the dialog:

xs, sm, md, lg, xl, 2xl (default), 3xl, 4xl, 5xl, 6xl, 7xl

The PositionShort type defines the relative position of the dialog on the screen:

Value	Description
`"center"`	Centers the dialog on the screen.
`"top"`	Positions the dialog at the top of the screen.
`"bottom"`	Positions the dialog at the bottom of the screen.
`"left"`	Positions the dialog on the left side of the screen.
`"right"`	Positions the dialog on the right side of the screen.
`"bottom-left"`	Positions the dialog at the bottom-left corner.
`"top-left"`	Positions the dialog at the top-left corner.
`"bottom-right"`	Positions the dialog at the bottom-right corner.
`"top-right"`	Positions the dialog at the top-right corner.