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-disable-focus-trap If true, focus trap will be disabled.	boolean	false
placement Placement of drawer.	"left" | "right" | "top" | "bottom"	right
size Size of drawer.	"sm" | "md" | "lg" | "xl" | "2xl" | "full";	md
variant Variant of drawer.	"default" | "floating"	default

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

Variant

The floating variant displays the drawer as a card with rounded corners and margin from edges. Use only MpDrawerBody for content layout to preserve the rounded styling.