Skip to content

MazDrawer

MazDrawer is a standalone component to add a collapsible sidebar at the top and bottom bar

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

Basic usage

Props, Event & Slots

Props

Prop nameDescriptionTypeValuesDefault
titleThe title of the drawerstring-undefined
variantThe variant of the drawer
@values 'right', 'top', 'left', 'bottom'
union-'right'
sizeThe size of the drawerstring-'30rem'
backdropClassThe class of the backdropstring-undefined
noCloseDisable the close buttonboolean-false

Events

Event namePropertiesDescription
closeemitted when drawer is close (after animation)
openemitted when drawer is open
before-closeemitted before drawer is close
update:model-valuevalue boolean - The value of the modelemitted when drawer is open or close

Slots

NameDescriptionBindings
title
default