Dialogs

open_in_newmaterial docs

• Use dialogs to make sure users act on information
• Commonly used to confirm high-risk actions like deleting progress

Basic usage

You can use dialog with m-dialog. The component ref has open() and close() exposed functions, use it to show/hide modal dialog.

Title

Some lorem ipsum dialog text

code

vue template

<m-button text="Open dialog" @click="dialog.open()"/>
<m-dialog ref="dialog" title="Title" text="Some lorem ipsum dialog text">
  <template #actions>
    <m-button variant="text" text="cancel" @click="dialog.close()"/>
    <m-button text="action 2"/>
  </template>
</m-dialog>

script setup

import {ref} from "vue";

const dialog = ref(null)