MazDialog

MazDialog is a standalone dialog component to show important informations to the user or propose specific action. Many options are available. You can hide the header or the footer, full-size layout, differents states etc.

TIP

This component uses <Teleport to="body"> with MazBackdrop, so you can implement this component anywhere and it inherits all its props

Basic usage

<script setup>
import MazDialog from 'maz-ui/components/MazDialog'
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <MazBtn @click="isOpen = true">
    Open Dialog
  </MazBtn>

  <MazDialog v-model="isOpen" title="Dialog Title">
    <p>
      Your content
    </p>

    <template #footer="{ close }">
      <MazBtn @click="close">
        Confirm
      </MazBtn>
    </template>
  </MazDialog>
</template>

Scrollable

For long content, you can enable scrolling in content part (Header and footer slot remain visible at top and bottom)

<MazDialog v-model="scollableOpened" title="Dialog Title" max-height="400px" scrollable>
  <template #title> Scrollable Dialog Title </template>

  <template #default>
    <p v-for="i in 40" :key="i" style="padding-bottom: 2rem">Scroll down</p>
  </template>

  <template #footer>
    <MazBtn @click="scollableOpened = false"> Confirm </MazBtn>
  </template>
</MazDialog>

Events

Event name	Properties	Description
close		emitted when modal is close
open		emitted when modal is open
update:model-value		emitted when modal is open or close

Slots

Name	Description	Bindings
header	Header slot	close Function - close function
title	Title slot in the header
default	Default content	close Function - close function
footer	Footer slot	close Function - close function

Expose

close

Close the dialog
@description This is used to close the dialog