Table of Contents
Drawer
A Drawer is a container for supplementary content that is anchored to the edge of a page.
Used for this
- 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
- Name8.73.2•View source•View on npm
- Installnpm install @zendeskgarden/react-modals
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { DrawerModal } from '@zendeskgarden/react-modals'
API
DrawerModal
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 |
DrawerModal.Body
Extends HTMLAttributes<HTMLDivElement>
DrawerModal.Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
DrawerModal.Footer
Extends HTMLAttributes<HTMLDivElement>
DrawerModal.FooterItem
Extends HTMLAttributes<HTMLSpanElement>
DrawerModal.Header
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
tag | any | div | Updates the element's HTML tag |