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.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

TIP

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

Basic usage

vue

<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>

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

  const isOpen = ref(false)
</script>

Scrollable

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

WARNING

With this option, an overflow is applied: So, some problems with absolute content may appear - such as <MazSelect /> opened list can not be visible outside the dialog content part, you should scroll again to show the full content - Check example below

Props, Event & Slots

Props

Prop name	Type	Values	Default
title	-	-	undefined
noClose	-	-	false
maxWidth	-	-	'100%'
minWidth	-	-	'32rem'
scrollable	-	-	false
persistent	-	-	false

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

MazDialog ​

Basic usage ​

Scrollable ​

Props, Event & Slots ​

Props ​

Events ​

Slots ​

Expose ​

close ​