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

<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

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

  <template #default>
    <p class="maz-py-4">
      Scroll
    </p>
    <p class="maz-py-4">
      Scroll
    </p>
    <p class="maz-py-4">
      Scroll
    </p>
    <p class="maz-py-4">
      Scroll
    </p>
    <p class="maz-py-4">
      Scroll
    </p>
    <p class="maz-py-4">
      Scroll
    </p>
    <p class="maz-py-4">
      Scroll
    </p>
    <MazSelect
      :model-value="1"
      :options="[
        { value: 1, label: 1 },
        { value: 2, label: 2 },
        { value: 3, label: 3 },
        { value: 4, label: 4 },
        { value: 5, label: 5 },
        { value: 6, label: 6 },
      ]"
    />
  </template>
  <template #footer>
    <MazBtn @click="scollableOpened = false">
      Confirm
    </MazBtn>
  </template>
</MazDialog>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
title		-	-	undefined
noClose		-	-	false
width		-	-	'500px'
maxWidth		-	-	'95vw'
maxHeight		-	-	'95vh'
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

Expose

close