Version:

Install ​

shell
npm i @mate-vue/dialog

Import ​

vue
<script setup>
import { MateDialog } from '@mate-vue/dialog';
</script>

Variants ​

Danger ​

Small ​

vue
<template>
  <MateDialog header-title="Small dialog" theme="small" v-model:opened="opened">
    <p>Content</p>
  </MateDialog>
</template>

Medium ​

vue
<template>
  <MateDialog header-title="Medium dialog" theme="medium" v-model:opened="opened">
    <p>Content</p>
  </MateDialog>
</template>

Large ​

vue
<template>
  <MateDialog header-title="Large dialog" theme="large" v-model:opened="opened">
    <p>Content</p>
  </MateDialog>
</template>
vue
<template>
  <MateDialog header-title="Datensätze löschen?" v-model:opened="opened">
    <p>Diese Aktion kann nicht rückgängig gemacht werden.</p>
    <template #footer>
      <MateButton @click="opened = false">Abbrechen</MateButton>
      <MateButton theme="error primary" @click="opened = false">Löschen</MateButton>
    </template>
  </MateDialog>
</template>