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

MazDialog ​

Basic usage ​

Scrollable ​

MazDialog

Basic usage

Scrollable