Drawer API

Learn about the Drawer component's props and CSS classes.

Import

import {
  DrawerProps,
  DrawerHeaderProps,
  DrawerFooterProps,
} from "@prismane/core";

Drawer extends Paper and Animation component's props.

Name	Type	Description	Default
`open`	`boolean`	Triggers the open state of the dialog.	false
`closable`	`boolean`	Triggers the closable state of the dialog.	-
`onClose`	`() => void`	Callback that will be executed on closing the dialog.	() =>
`size`	PrismaneBreakpoints / `string / number`	The size of the drawer.	base
`position`	`right / left / top / bottom`	The position of the drawer.	left

Drawer.Header extends Flex component's props.

Drawer.Footer extends Flex component's props.

Drawer extends Paper and Animation components' CSS classes.

Rule	Global Class	Description
`root`	`.PrismaneDrawer-root`	The wrapper box of the drawer.
`root`	`.PrismaneDrawer-root-open`	The wrapper box of the drawer based on the open state.

Drawer.Header extends Flex component's CSS classes.

Rule	Global Class	Description
`root`	`.PrismaneDrawerHeader-root`	The wrapper box of the drawer's header component.

Drawer.Footer extends Flex component's CSS classes.

Rule	Global Class	Description
`root`	`.PrismaneDrawerFooter-root`	The wrapper box of the drawer's footer component.