Dialog

Basic Usage

The Dialog component allows you to display modal dialogs with ease. It provides flexibility in positioning, animations, size, and more.

To get started, you need to control the visibility of the dialog using the v-model directive and customize other options like size, position, and more.

Control Visibility

Use the v-model directive to bind the dialog's visibility to a reactive variable.

<Button @click="dialog = true">Open Dialog</Button>
<Dialog v-model="dialog">
  The dialog is open.
</Dialog>

Dialog Size

You can adjust the size of the dialog using the size prop. Available options are xs, sm, md, lg, xl, 2xl, 3xl, and more.

<Dialog v-model="smallDialog" size="sm"> Small Dialog</Dialog>
<Dialog v-model="largeDialog" size="lg"> Large Dialog</Dialog>

Positioning

Control where the dialog appears on the screen using the position prop. Options include center, top, bottom, left, right, or combinations like top-left.

<Dialog v-model="dialog" position="center"> Centered Dialog</Dialog>
<Dialog v-model="dialog" position="bottom-right"> Bottom-Right Dialog</Dialog>

Close Button

Enable a close button inside the dialog by setting the closeButton prop to true.

<Dialog v-model="dialog" closeButton>
  This dialog has a close button.
</Dialog>

Background Interaction

Prevent the dialog from closing when clicking the background using the notCloseBackground prop. This is particularly useful for scenarios where the user must provide input or take a specific action (e.g., clicking a button) before the dialog can be dismissed. It ensures that the dialog remains open until an explicit interaction occurs.

<Dialog v-model="backgroundDialog" :notCloseBackground="true">
  <h2>Important Action Required</h2>
  <p>Please confirm your choice before closing this dialog.</p>
  <button @click="backgroundDialog = false">Confirm</button>
</Dialog>

Removing Margins

If you want the dialog to have no default margin, set the withoutMargin prop to true.

<Dialog v-model="noMarginDialog" :withoutMargin="true">
  This dialog has no margins.
</Dialog>

Disabling Animations

Disable all animations for the dialog by enabling the notAnimate prop.

<Dialog v-model="noAnimationDialog" :notAnimate="true">
  This dialog has no animations.
</Dialog>

Teleport Target

Specify where the dialog should be rendered in the DOM using the toTeleport prop. The default is "body".

<Dialog v-model="teleportDialog" toTeleport="#custom-target">
  This dialog is teleported to a custom DOM element.
</Dialog>

Custom Classes

Customize the dialog’s appearance using the class and classBody props.

<Dialog
    v-model="dialog"
    class="custom-dialog-class"
    classBody="custom-dialog-body-class">
  ...
</Dialog>

Background Customization

You can customize the background of the dialog using the background slot or apply custom styles to the background. The background can be styled in any way you like, providing flexibility for your design needs.

For instance, if you declare the background slot but leave it empty, the dialog will have no background at all, resulting in a completely transparent background. This can be useful for creating minimalistic or fully custom visual effects.

<template>
  <Dialog v-model="backgroundCustomDialog">
    <template #background>
      <!-- Empty background slot creates a transparent background -->
    </template>
    <p>This dialog has a completely transparent background.</p>
  </Dialog>
</template>

You can also add a styled background by defining custom content in the background slot.

<template>
  <Dialog v-model="backgroundCustomDialog">
    <template #background>
      <div class="custom-background"></div>
    </template>
    <p>This dialog has a custom background.</p>
  </Dialog>
</template>