MazDrawer

MazDrawer is a panel that slides in from the top, the bottom, the left or the right side of the screen over a backdrop, for side menus, filters or details

Before use it, you should install the MazUi plugin 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="flex flex-wrap gap-2 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="flex flex-wrap gap-2 mt-4">
        <MazBtn color="destructive" @click="close"> Close </MazBtn>
      </div>
    </div>
  </template>
</MazDrawer>

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

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

Accessibility

The drawer is a modal dialog labelled by its title. The focus is trapped inside while it is open, Esc closes it, and the rest of the page is inert (except the toasts and the live regions). The close button is labelled from @maz-ui/translations (aria.close).

Props

Name	Description	Type	Required	Default	Possible values
title	The title of the drawer	string	No	-	-
variant	The edge from which the drawer slides in. start (= left in LTR, right in RTL) and end (= right in LTR, left in RTL) follow the document direction; top and bottom are physical.	"end" | "start" | "bottom" | "top"	No	"end"	'end' | 'start' | 'bottom' | 'top'
size	The size of the drawer	``${number}rem|${number}px|${number}em|${number}vw|${number}vh|${number}vmin|${number}vmax|${number}%|${number}ch|${number}cm|${number}mm|${number}in|${number}ex|${number}pc|${number...`	No	"30rem"	-
backdrop-class	The class of the backdrop	string	No	-	-
hide-close-button	Disable the close button	boolean	No	-	-
model-value	v-model Value of v-model, forwarded to the inner component	boolean	No	-	-

Events

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

Slots

Name	Description	Bindings
title		close () => void
default		close () => void