MazDrawer

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

TIP

This component uses <Teleport to="body"> with MazBackdrop, so you can implement this component anywhere and it inherits all its props

Basic usage

<MazBtn @click="isOpenedTop = !isOpenedTop"> Open top drawer </MazBtn>
<MazBtn @click="isOpenedLeft = !isOpenedLeft"> Open left drawer </MazBtn>
<MazBtn @click="isOpenedRight = !isOpenedRight"> Open right drawer </MazBtn>
<MazBtn @click="isOpenedBottom = !isOpenedBottom"> Open bottom drawer </MazBtn>

<MazDrawer variant="top" v-model="isOpenedTop">
  <template #title> Drawer top </template>
  <template #default="{ close }">
    <div style="padding: 16px">
      <p>Content</p>
      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

<MazDrawer variant="bottom" v-model="isOpenedBottom">
  <template #title> Drawer bottom </template>
  <template #default="{ close }">
    <div style="padding: 16px">
      <p>Content</p>
      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

<MazDrawer variant="left" v-model="isOpenedLeft">
  <template #title> Drawer left </template>
  <template #default="{ close }">
    <div style="padding: 16px">
      <p>Content</p>
      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

<MazDrawer variant="right" v-model="isOpenedRight">
  <template #title> Drawer right </template>
  <template #default="{ close }">
    <div style="padding: 16px">
      <p>Content</p>
      <div class="maz-flex maz-flex-wrap maz-gap-2 maz-mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

Props

Name	Description	Type	Required	Default	Possible values
title	The title of the drawer	string	No	undefined	-
variant	The variant of the drawer	"right" | "top" | "left" | "bottom"	No	'right'	right', 'top', 'left', 'bottom
size	The size of the drawer	string	No	'30rem'	-
backdrop-class	The class of the backdrop	string	No	undefined	-
hide-close-button	Disable the close button	boolean	No	undefined	-
no-close		any	No	false	-

Events

Event name	Properties	Description
close		emitted when drawer is close (after animation)
open		emitted when drawer is open
before-close		emitted before drawer is close
update:model-value	value boolean - The value of the model	emitted when drawer is open or close

Slots

Name	Description	Bindings
title
default