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

<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="danger" @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="danger" @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="danger" @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="danger" @click="close">
          Close
        </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
title	The title of the drawer	string	-	undefined
variant	The variant of the drawer @values 'right', 'top', 'left', 'bottom'	union	-	'right'
size	The size of the drawer	string	-	'30rem'
backdropClass	The class of the backdrop	string	-	undefined
noClose	Disable the close button	boolean	-	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