Drawer

A panel that slides out from the edge of the screen.

When to use

A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.

Use a Form to create or edit a set of information.
Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
When the same Form is needed in multiple places.

Notes for developers Since the 5.17.0, we provided the loading prop by the Spin. However, since the 5.18.0 version, we have fixed this design error and replaced the Spin with the Skeleton, and also modified the type of loading prop, which can only accept boolean type.

Stacking

CeeBee's Drawer resolves --cb-z-drawer, with its backdrop on --cb-z-drawer-backdrop. A dialog rendered by Drawer content automatically moves to the documented above-drawer rung; pass that Modal layer="above-drawer" only to control an exceptional call chain deliberately. The dialog and its backdrop then resolve above the drawer while the drawer's focus trap waits for it.

Do keep a modal's focused task inside a drawer on the documented rung.
Don't restyle the drawer or dialog with a local z-index to force one above the other.

Examples

Basic

Basic drawer.

Resizable

Resizable drawer that allows users to adjust the drawer's width or height by dragging the edge.

Extra Actions

Extra actions should be placed at corner of drawer in Ceebee UI, you can use extra prop for that.

Submit form in drawer

Use a form in Drawer with a submit button.

Multi-level drawer

Open a new drawer on top of an existing drawer to handle multi branch tasks.

mask

mask effect.

Custom semantic dom styling

You can customize the semantic dom style of Drawer by passing objects or functions through classNames and styles.

Custom Placement

The Drawer can appear from any edge of the screen.

Loading

Set the loading status of Drawer.

Render in current dom

Render in current dom. custom container, check getContainer. > Note: style and className props are moved to Drawer panel in v5 which is aligned with Modal component. Original style and className props are replaced by rootStyle and rootClassName. > When getContainer returns a DOM node, you need to manually set rootStyle to { position: 'absolute' }, see #41951.

Preview drawer

Use Drawer to quickly preview details of an object, such as those in a list.

Preset size

The default width (or height) of Drawer is 378px, and there is a preset large size 736px.

Closable placement

Drawer with closable placement, customize the close placement to the end, defaults to start.

API

Drawer are exported from @ceebee/ui/client.

Drawer

Property	Description	Type	Default	Version
`afterOpenChange`	Callback after the animation ends when switching drawers	`function(open)`	`-`	—
`bodyStyle`	Style of the drawer body, please use styles.body instead	`CSSProperties`	`-`	-
`className`	Config Drawer Panel className. Use rootClassName if want to config top DOM style	`string`	`-`	—
`classNames`	Customize class for each semantic structure inside the Drawer component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`closable`	Whether to show a close button. The position can be configured with placement	`boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; placement?: 'start' \| 'end' }`	`true`	placement: 5.28.0
`contentWrapperStyle`	Style of the drawer wrapper, please use styles.wrapper instead	`CSSProperties`	`-`	-
`destroyOnClose`	Whether to unmount child components on closing drawer or not	`boolean`	`false`	—
`destroyInactivePanel`	Whether to unmount child components on closing drawer or not, please use destroyOnHidden instead	`boolean`	`false`	-
`destroyOnHidden`	Whether to unmount child components on closing drawer or not	`boolean`	`false`	5.25.0
`drawerStyle`	Style of the drawer panel, please use styles.section instead	`CSSProperties`	`-`	-
`extra`	Extra actions area at corner	`ReactNode`	`-`	4.17.0
`footer`	The footer for Drawer	`ReactNode`	`-`	—
`footerStyle`	Style of the drawer footer, please use styles.footer instead	`CSSProperties`	`-`	-
`forceRender`	Pre-render Drawer component forcibly	`boolean`	`false`	—
`focusable`	Configuration for focus management in the Drawer	`{ trap?: boolean, focusTriggerAfterClose?: boolean }`	`-`	6.2.0
`getContainer`	mounted node and display window for Drawer	`HTMLElement \| () => HTMLElement \| Selectors \| false`	`body`	—
`headerStyle`	Style of the drawer header part, please use styles.header instead	`CSSProperties`	`-`	—
`height`	Placement is top or bottom, height of the Drawer dialog, please use size instead	`string \| number`	`378`	—
`keyboard`	Whether support press esc to close	`boolean`	`true`	—
`loading`	Show the Skeleton	`boolean`	`false`	5.17.0
`mask`	Mask effect	`boolean \| { enabled?: boolean, blur?: boolean, closable?: boolean }`	`true`	mask.closable: 6.3.0
`maskClosable`	Clicking on the mask (area outside the Drawer) to close the Drawer or not	`boolean`	`true`	—
`maskStyle`	Style of the drawer mask, please use styles.mask instead	`CSSProperties`	`-`	-
`maxSize`	Maximum size (width or height depending on placement) when resizable	`number`	`-`	6.0.0
`open`	Whether the Drawer dialog is visible or not	`boolean`	`false`	—
`placement`	The placement of the Drawer	`top \| right \| bottom \| left`	`right`	—
`push`	Nested drawers push behavior	`boolean \| { distance: string \| number }`	`{ distance: 180 }`	4.5.0+
`resizable`	Enable resizable by dragging	`boolean \| ResizableConfig`	`-`	boolean: 6.1.0
`rootStyle`	Style of wrapper element which contains mask compare to style	`CSSProperties`	`-`	—
`size`	preset size of drawer, default 378px and large 736px, or a custom number	`'default' \| 'large' \| number \| string`	`'default'`	4.17.0, string: 6.2.0
`style`	Style of Drawer panel. Use styles.body if want to config body only	`CSSProperties`	`-`	—
`styles`	Customize inline style for each semantic structure inside the Drawer component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`title`	The title for Drawer	`ReactNode`	`-`	—
`width`	Width of the Drawer dialog, please use size instead	`string \| number`	`378`	—
`zIndex`	The z-index of the Drawer	`number`	`1000`	—
`onClose`	Specify a callback that will be called when a user clicks mask, close button or Cancel button	`function(e)`	`-`	—
`drawerRender`	Custom drawer content render	`(node: ReactNode) => ReactNode`	`-`	5.18.0

ResizableConfig

Property	Description	Type	Default	Version
`onResizeStart`	Callback when resize starts	`() => void`	`-`	6.0.0
`onResize`	Callback during resizing	`(size: number) => void`	`-`	6.0.0
`onResizeEnd`	Callback when resize ends	`() => void`	`-`	6.0.0