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

<template>
  <MazDrawer variant="top" v-model="isOpenedTop">
    <template #title>
      Drawer top
    </template>
    <template #default="{ close }">
      <div style="padding: 16px;">
        <p>
          Content
        </p>
        <div class="flex flex-wrap gap-05">
          <MazBtn color="danger" @click="close">
            Close
          </MazBtn>
          <MazBtn color="success" @click="close">
            Confirm
          </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="flex flex-wrap gap-05">
          <MazBtn color="danger" @click="close">
            Close
          </MazBtn>
          <MazBtn color="success" @click="close">
            Confirm
          </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="flex flex-wrap gap-05">
          <MazBtn color="danger" @click="close">
            Close
          </MazBtn>
          <MazBtn color="success" @click="close">
            Confirm
          </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="flex flex-wrap gap-05">
          <MazBtn color="danger" @click="close">
            Close
          </MazBtn>
          <MazBtn color="success" @click="close">
            Confirm
          </MazBtn>
        </div>
      </div>
    </template>
  </MazDrawer>
  <div class="flex flex-wrap gap-05">
    <MazBtn @click="isOpenedTop = !isOpenedTop">
      Open top drawer
    </MazBtn>

    <MazBtn @click="isOpenedBottom = !isOpenedBottom">
      Open bottom drawer
    </MazBtn>

    <MazBtn @click="isOpenedRight = !isOpenedRight">
      Open right drawer
    </MazBtn>

    <MazBtn @click="isOpenedLeft = !isOpenedLeft">
      Open left drawer
    </MazBtn>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  import MazDrawer from 'maz-ui/components/MazDrawer'

  const isOpenedTop = ref(false)
  const isOpenedBottom = ref(false)
  const isOpenedRight = ref(false)
  const isOpenedLeft = ref(false)
</script>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
title	The title of the drawer	string	-	undefined
variant	The variant of the drawer	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		emitted when drawer is open or close

Slots

Name	Description	Bindings
title
default