MazBackdrop

MazBackdrop is a standalone component to manage components that need a backdrop

INFO

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

TIP

This component uses <Teleport to="body">, so you can implement this component anywhere you want

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
modelValue	@model Modal's model value	boolean	-
teleportSelector	Teleport selector	string	-
beforeClose	Function called before modal is close	TSFunctionType	-
persistent	Persistent dialog (not closable by clicking outside and remove close button)	boolean	-
noCloseOnEscKey	Prevent close on escape key	boolean	-
transitionName	Transition name	string	-
backdropClass	Backdrop class	TSIndexedAccessType	-
backdropContentClass	Backdrop content class	TSIndexedAccessType	-
contentPadding	Add padding to the content	boolean	-
justify	Justify content	union	-
align	Align content	union	-
variant	Variant	union	-

Events

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

Slots

Name	Description	Bindings
default	Place your content here	close Function - close function on-backdrop-clicked Function - onBackdropClicked function (respects persistent prop)

Expose

onBackdropAnimationEnter

onBackdropAnimationLeave

onBackdropClicked

close

present

toggleModal

onKeyPress