Drawer
A drawer is a panel that slides in from the right side of the screen. The Drawer is overlayed on top of the main area of the page to capture the user’s attention while keeping the context of the current task.
import { ... } from '@ag.ds-next/react/drawer';Usage
Drawer components can be imported via the drawer entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/drawer';Props
| Prop | Type | Description |
|---|---|---|
| title | string | The title of the drawer. It can span lines but should not be too long. |
| actions? | ReactNode | The actions to display at the bottom of the drawer. Typically a `ButtonGroup`. |
| children? | ReactNode | |
| elementToFocusOnClose? | HTMLElement | null | On close of the drawer, this element will be focused, rather than the trigger element. |
| isOpen? | booleanDefault: false | If true, the drawer will be displayed. |
| mutedOverlay? | booleanDefault: false | Lighten the overlay so that the main content underneath is more visible while the draw is open. |
| onClose? | (() => void) | Function to be called when the 'Close' button is pressed. |
| onDismiss? | (() => void) | @deprecated use `onClose` instead |
| width? | "md" | "lg"Default: "md" | The width of the drawer. |
Source
You can view the full source code for this package on Github.