The following props are available for drawer component. These are the custom props that we've added for the drawer component and you can use all the other native props as well.Navigation
| Attribute | Type | Description | Default |
|---|---|---|---|
open | boolean | Sets the open and close state of drawer | No default value it's a required prop. |
size | number | Set's the width/height of the drawer depending on the drawer placement | 250 |
placement | Placement | Sets the drawer placement | left |
overlay | boolean | Sets the overlay visibility for the drawer | true |
overlayRef | Overlay Ref | Add reference for the drawer overlay | undefined |
overlayProps | Overlay Props | Sets the rest props for the drawer overlay | undefined |
dismiss | dismiss | Change dismiss listeners for drawer | undefined |
onClose | function | Sets the callback function for closing the drawer | undefined |
transition | Framer Motion | Sets the transition for drawer | |
className | string | Add custom className for drawer | '' |
children | node | Add content for drawer | No default value it's a required prop. |
import type { DrawerProps } from "@material-tailwind/react";export type placement = "top" | "right" | "bottom" | "left";export type overlayRef = React.Ref<HTMLDivElement>;export type overlayProps = React.ComponentProps<"div">;type dismissType = {
enabled?: boolean;
escapeKey?: boolean;
referencePress?: boolean;
referencePressEvent?: "pointerdown" | "mousedown" | "click";
outsidePress?: boolean | ((event: MouseEvent) => boolean);
outsidePressEvent?: "pointerdown" | "mousedown" | "click";
ancestorScroll?: boolean;
bubbles?:
| boolean
| {
escapeKey?: boolean;
outsidePress?: boolean;
};
};