Drawer
Usage
Position
Drawer can be placed on left
(default), top
, right
and bottom
. Control drawer position with position
prop,
for example <Drawer position="top" />
.
Customize overlay
Drawer
uses Overlay component, you can set any props that Overlay
supports with overlayProps
:
Sizes
You can change drawer width/height (depends on position
) by setting size
prop to predefined size or any valid width,
for example, size="55%"
or size={200}
:
Remove header
To remove header set withCloseButton={false}
Drawer with scroll
Usage with ScrollArea
Change transition
Drawer
is built with Transition component. Use transitionProps
prop to customize any Transition properties:
Initial focus
Drawer
uses FocusTrap to trap focus. Add data-autofocus
attribute to the element that should receive initial focus.
Control behavior
The following props can be used to control Drawer
behavior.
In most cases it is not recommended to turn these features off –
it will make the component less accessible.
trapFocus
– determines whether focus should be trapped inside drawercloseOnEscape
– determines whether the drawer should be closed whenEscape
key is pressedcloseOnClickOutside
– determines whether the drawer should be closed when user clicks on the overlayreturnFocus
– determines whether focus should be returned to the element that was focused before the drawer was opened
Compound components
You can use the following compound components to have full control over the Drawer
rendering:
Drawer.Root
– context providerDrawer.Overlay
– render OverlayDrawer.Content
– main drawer element, should include all drawer contentDrawer.Header
– sticky header, usually containsDrawer.Title
andDrawer.CloseButton
Drawer.Title
–h2
element,aria-labelledby
ofDrawer.Content
is pointing to this element, usually is rendered insideDrawer.Header
Drawer.CloseButton
– close button, usually rendered insideDrawer.Header
Drawer.Body
– a place for main content,aria-describedby
ofDrawer.Content
is pointing to this element
Fixed elements offset
Drawer
component uses react-remove-scroll
package to lock scroll. To properly size these elements
add a className
to them (documentation):
Accessibility
Drawer
component follows WAI-ARIA recommendations on accessibility.
Labels
Set title
props to make component accessible, will add aria-labelledby
to the content element:
To set close button aria-label
use closeButtonProps
:
Keyboard interactions
Key | Description |
---|---|
Escape | Close modal |
Drawer component props
Name | Type | Description |
---|---|---|
children | ReactNode | Modal content |
closeButtonProps | ModalBaseCloseButtonProps | Props added to close button |
closeOnClickOutside | boolean | Determines whether the modal/drawer should be closed when user clicks on the overlay, true by default |
closeOnEscape | boolean | Determines whether onClose should be called when user presses escape key, true by default |
id | string | Id used to connect modal/drawer with body and title |
keepMounted | boolean | If set modal/drawer will not be unmounted from the DOM when it is hidden, display: none styles will be added instead |
lockScroll | boolean | Determines whether scroll should be locked when opened={true}, defaults to true |
onClose * | () => void | Called when modal/drawer is closed |
opened * | boolean | Determines whether modal/drawer is opened |
overlayProps | ModalBaseOverlayProps | Props added to Overlay component, use configure opacity, background color, styles and other properties |
padding | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.spacing or any valid CSS value to set content, header and footer padding, 'md' by default |
portalProps | Omit<PortalProps, "children" | "target" | "withinPortal"> | Props to pass down to the portal when withinPortal is true |
position | "bottom" | "left" | "right" | "top" | Side of the screen where drawer will be opened, 'left' by default |
returnFocus | boolean | Determines whether focus should be returned to the last active element onClose is called, true by default |
scrollAreaComponent | ScrollAreaComponent | Scroll area component, ScrollArea.Autosize by default |
shadow | MantineShadow | Key of theme.shadows or any valid css box-shadow value, 'xl' by default |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Controls content width, 'md' by default |
target | string | HTMLElement | Target element or selector where Portal should be rendered, by default new element is created and appended to the document.body |
title | ReactNode | Modal title |
transitionProps | Partial<Omit<TransitionProps, "mounted">> | Props added to Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: 'pop' } by default |
trapFocus | boolean | Determines whether focus should be trapped, true by default |
withCloseButton | boolean | Determines whether close button should be rendered, true by default |
withOverlay | boolean | Determines whether overlay should be rendered, true by default |
withinPortal | boolean | Determines whether component should be rendered inside Portal, true by default |
zIndex | number | z-index CSS property of root element, 200 by default |
Drawer component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-Drawer-root | Root element |
inner | .asuikit-Drawer-inner | Element used to position drawer, has fixed position, takes entire screen |
content | .asuikit-Drawer-content | Drawer.Content root element |
header | .asuikit-Drawer-header | Contains title and close button |
overlay | .asuikit-Drawer-overlay | Overlay displayed under the Drawer.Content |
title | .asuikit-Drawer-title | Drawer title (h2 tag), displayed in header |
body | .asuikit-Drawer-body | Drawer body, displayed after header |
close | .asuikit-Drawer-close | Close button |