Drawer
A Drawer is a container for supplementary content that is anchored to the edge of a page.
- To display information or actions that are supplementary to the screen’s primary content
- To display a list of actions that affect the screen’s content, such as filtering data
How to use it
Default
When the Drawer opens, focus moves to it so users who rely on a keyboard and/or screen reader can access the content within. Focus is kept in the Drawer until it is dismissed.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-modals
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Drawer } from '@zendeskgarden/react-modals'
API
Drawer
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
appendToNode | Element | Defines the DOM element that the modal will attatch to | |
backdropProps | HTMLAttributes<HTMLDivElement> | Passes HTML attributes to the backdrop element | |
focusOnMount | boolean | true | Directs keyboard focus to the modal on mount |
isOpen | boolean | Opens the modal | |
onClose | Handles close actions. Can be triggered from the backdrop and from the close icon. Parameters event The DOM event that triggered the close action | ||
restoreFocus | boolean | true | Returns keyboard focus to the element that triggered the modal |
Drawer.Body
Extends HTMLAttributes<HTMLDivElement>
Drawer.Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
Drawer.Footer
Extends HTMLAttributes<HTMLDivElement>
Drawer.FooterItem
Extends HTMLAttributes<HTMLSpanElement>
Drawer.Header
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
tag | any | div | Updates the element's HTML tag |