Dialog

To open a dialog, call the explosed method open on the dialog reference. The method optionally accepts a query selector, which will be used to set inert=true on given element (if found in the DOM).

The dialog element will be teleported to the body element.

<script lang="ts" setup>
import { NNDialog, NNButton } from "@fronntui/vue";
import { ref } from "vue";

const dialog = ref();

const isDismissable = ref(false);

const openDialog = (dismissable: boolean) => {
  isDismissable.value = dismissable;
  dialog.value.open();
};

const closeDialog = () => {
  dialog.value.close();
};
</script>

<template>
  <NNButton @click="openDialog(false)">open dialog</NNButton>
  <NNButton @click="openDialog(true)">open dismissable dialog</NNButton>
  <NNDialog title="Some Dialog" ref="dialog" :dismissable="isDismissable">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem fugiat
      eligendi fuga at ea minus rem quibusdam corrupti. Repudiandae expedita
      ullam delectus praesentium illo excepturi quidem animi accusamus autem
      maiores.
    </p>
    <NNButton @click="closeDialog">close programmatically</NNButton>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut beatae nulla
      labore doloremque officia sequi ullam aliquid ipsa est ducimus explicabo
      veritatis maxime eius eaque, quasi id cupiditate, excepturi quidem.
    </p>
  </NNDialog>
</template>

Props

Name

Type

title

string

Dialog title

dismissable

boolean

If set to true, the dialog can be closed by clicking outside or by pressing Esacpe. Otherwise, the dialog can to be closed explicitly.

Events

Name

Payload

open

Fired after the dialog had been opened

close

Fired after the dialog has been closed

Slots

Name

Payload

default

dialog body

header

Optional dialog header

default

Optional dialog footer

Collapsible Drawer