Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

Import

import { MpDrawer, MpDrawerOverlay, MpDrawerContent, MpDrawerCloseButton, MpDrawerHeader, MpDrawerBody, MpDrawerFooter } from '@mekari/pixel3'

Playground

API

MpDrawer

Props

Events

Slots

Name	Type	Default
id Id of drawer.	string	-
is-open If true, drawer will open.	boolean	false
is-block-scroll-on-mount If true, scrolling will be only active in drawer body.	boolean	true
is-close-on-esc If true, pressing esc key drawer will close.	boolean	true
is-close-on-overlay-click If true, when overlay clicked drawer will close.	boolean	true
is-keep-alive If true, drawer will be hidden using CSS instead of destroying DOM.	boolean	false
is-full-height If true and placement is set to top or bottom, drawer fills the height of the viewport.	boolean	true
placement Placement of drawer.	"left" | "right" | "top" | "bottom"	md
size Size of drawer.	"sm" | "md" | "lg" | "xl" | "2xl" | "full";	md

MpDrawerContent

Slots

Name	Type
default Drawer content slot	any

MpDrawerHeader

Slots

Name	Type
default Drawer header slot	any

MpDrawerBody

Slots

Name	Type
default Drawer body slot	any

MpDrawerFooter

Slots

Name	Type
default Drawer footer slot	any

Usage

Basic

Size