Skip to content

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 usex <Teleport to="body"> with MazBackdrop, so you can implement this component anywhere and it inherits all its props

Basic usage

Scrollable

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

Events

Event namePropertiesDescription
closeemitted when modal is close
openemitted when modal is open
update:model-valueemitted when modal is open or close

Slots

NameDescriptionBindings
headerHeader slotclose Function - close function
titleTitle slot in the header
defaultDefault contentclose Function - close function
footerFooter slotclose Function - close function

Expose

close

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