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>