Skip to content
On this page

Dialog

The ADialog component creates a popup dialog / modal on a web page to display content in an overlay window.

Import

js
import { ADialog } from 'ayovue'
import 'ayovue/themes/default/dialog.css'

Playground



width
title
<ADialog>Lorem ipsum dolar...</ADialog>

Header slot

View Codes
vue
<template>
  <AButton @click="showingDialog = true">Show dialog</AButton>
  <ADialog v-model="showingDialog" width="500px">
    <template #header="{ close }">
      <div class="d-flex jc-between ai-center" style="background: #e3e3e3; padding: 4px 16px">
        <div class="flex-1 d-flex ai-center">
          <img src="/q.png" alt="are you sure" />
          <div class="px-2">Are you sure?</div>
        </div>
        <AButton icon text @click="close" size="10" variant="danger"> X </AButton>
      </div>
    </template>
    <template #default>
      <p>This is modal content using default slot : Lorem ipsum dolor sit ... ?</p>
      <div class="py-3 d-flex jc-end">
        <AButton class="primary" @click="showingDialog = false"> Yes </AButton>
        <AButton class="secondary ml-3" @click="showingDialog = false" variant="danger">
          No
        </AButton>
      </div>
    </template>
  </ADialog>
</template>

<script setup>
// Imports
const showingDialog = ref('')
</script>
View Codes
vue
<template>
  <AButton @click="showingDialog = true">Show dialog</AButton>
  <ADialog v-model="showingDialog" width="500px" title="License Agreement">
    <template #default>
      <p v-for="i in 5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam alias, amet esse doloribus
        dolore aperiam dolorem dolor omnis earum illo nemo debitis quidem saepe repudiandae error
        deleniti eveniet quod enim?
      </p>
    </template>
    <template #footer="{ close }">
      <div class="p-3 text-right d-flex jc-between" style="background: #f5f5f5">
        <AButton @click="close" variant="success"> I Agree </AButton>
        <AButton @click="close" variant="danger"> Cancel </AButton>
      </div>
    </template>
  </ADialog>
</template>

<script setup>
// Imports
const showingDialog = ref('')
</script>

Nested Dialog

A Dialog can be nested within another Dialog.

View Codes
vue
<template>
  <AButton @click="showingDialog1 = true">Show 1st dialog</AButton>
  <ADialog v-model="showingDialog1" width="500px" title="First Dialog">
    <p>First dialog content</p>
    <AButton @click="showingDialog2 = true" variant="success" class="my-3">
      Show 2nd dialog
    </AButton>
    <ADialog v-model="showingDialog2" width="200px" title="Second Dialog">
      <p>This is second dialog content. You can open as many dialog as you want recursively</p>
    </ADialog>
  </ADialog>
</template>

Props

Dialog component has the following props.

Prop nameTypeRequiredDefault valueDetails
modelValueBooleanTrueModelValue to bind using v-model which Specifies whether the dialog should be open or close.
closeOnOutsideClickBooleanNofalseSpecify if the dialog will be closed on outside click.
hideHeaderBooleanNofalseTo hide dialog header
titleStringNoDialog titleTitle of the dialog header
widthStringNo800pxWidth of the dialog container

Slots

Dialog component has the following slots.

Slot nameDescriptionProps
defaultContent of the dialog component.N/A
headerContent of the dialog header.N/A
footerContent of the dialog footer.N/A

Events

Dialog component supports all native events.

Released under the MIT License.