Drawer
Introduction
Drawers overlay content over existing parts of the UI and are anchored to the edge of the screen.
Examples
Usage
Drawer
Drawer is a stateless React component controlled by the isOpen prop. Below a component uses it's state to control the Drawer.
API Reference
Drawer
Prop Name | Required? | Type | Description |
---|---|---|---|
autoFocus | false | boolean | Whether the overlay should acquire application focus when it first opens. |
backdropClassName | false | string | CSS class names to apply to backdrop element. |
backdropProps | false | HTMLProps<HTMLDivElement> | HTML props for the backdrop element. |
canEscapeKeyClose | false | boolean | Whether pressing the `esc` key should invoke `onClose`. |
canOutsideClickClose | false | boolean | Whether clicking outside the overlay element (either on backdrop when present or on document) should invoke `onClose`. |
className | false | string | A space-delimited list of class names to pass along to a child element. |
enforceFocus | false | boolean | Whether the overlay should prevent focus from leaving itself. That is, if the user attempts to focus an element outside the overlay and this prop is enabled, then the overlay will immediately bring focus back to itself. If you are nesting overlay components, either disable this prop on the "outermost" overlays or mark the nested ones `usePortal={false}`. |
hasBackdrop | false | boolean | Whether a container-spanning backdrop element should be rendered behind the contents. |
icon | false | IconName | MaybeElement | Name of a Blueprint UI icon (or an icon element) to render in the drawer's header. Note that the header will only be rendered if `title` is provided. |
isCloseButtonShown | false | boolean | Whether to show the close button in the dialog's header. Note that the header will only be rendered if `title` is provided. |
isOpen | true | boolean | Toggles the visibility of the overlay and its children. This prop is required because the component is controlled. |
lazy | false | boolean | If `true` and `usePortal={true}`, the `Portal` containing the children is created and attached to the DOM when the overlay is opened for the first time; otherwise this happens when the component mounts. Lazy mounting provides noticeable performance improvements if you have lots of overlays at once, such as on each row of a table. |
onClose | false | (event?: SyntheticEvent<HTMLElement>) => void | A callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the `esc` key (if enabled). Receives the event from the user's interaction, if there was an event (generally either a mouse or key event). Note that, since this component is controlled by the `isOpen` prop, it will not actually close itself until that prop becomes `false`. |
onClosed | false | (node: HTMLElement) => void | Lifecycle method invoked just after the CSS _close_ transition ends but before the child has been removed from the DOM. Receives the DOM element of the child being closed. |
onClosing | false | (node: HTMLElement) => void | Lifecycle method invoked just before the CSS _close_ transition begins on a child. Receives the DOM element of the child being closed. |
onOpened | false | (node: HTMLElement) => void | Lifecycle method invoked just after the CSS _open_ transition ends. Receives the DOM element of the child being opened. |
onOpening | false | (node: HTMLElement) => void | Lifecycle method invoked just after mounting the child in the DOM but just before the CSS _open_ transition begins. Receives the DOM element of the child being opened. |
portalClassName | false | string | Space-delimited string of class names applied to the `Portal` element if `usePortal={true}`. |
portalContainer | false | HTMLElement | The container element into which the overlay renders its contents, when `usePortal` is `true`. This prop is ignored if `usePortal` is `false`. |
position | false | Position | Position of a drawer. All angled positions will be casted into pure positions (TOP, BOTTOM, LEFT or RIGHT). |
size | false | number | string | CSS size of the drawer. This sets `width` if `vertical={false}` (default) and `height` otherwise. Constants are available for common sizes: - `Drawer.SIZE_SMALL = 360px` - `Drawer.SIZE_STANDARD = 50%` - `Drawer.SIZE_LARGE = 90%` |
style | false | CSSProperties | CSS styles to apply to the dialog. |
title | false | React.ReactNode | Title of the dialog. If provided, an element with `Classes.DIALOG_HEADER` will be rendered inside the dialog before any children elements. |
transitionDuration | false | number | Indicates how long (in milliseconds) the overlay's enter/leave transition takes. This is used by React `CSSTransition` to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length. |
transitionName | false | string | Name of the transition for internal `CSSTransition`. Providing your own name here will require defining new CSS transition properties. |
usePortal | false | boolean | Whether the overlay should be wrapped in a `Portal`, which renders its contents in a new element attached to `portalContainer` prop. This prop essentially determines which element is covered by the backdrop: if `false`, then only its parent is covered; otherwise, the entire page is covered (because the parent of the `Portal` is the `<body>` itself). Set this prop to `false` on nested overlays (such as `Dialog` or `Popover`) to ensure that they are rendered above their parents. |
vertical | false | boolean | Whether the drawer should appear with vertical styling. It will be ignored if `position` prop is set |
Related Reading
Blueprint Reference