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