import SwipeableDrawer from '@mui/material/SwipeableDrawer';
// or
import { SwipeableDrawer } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.
Props of the Drawer component are also available.
Name | Type | Default | Description |
---|---|---|---|
onClose* | func | - | Callback fired when the component requests to be closed. Signature: function(event: React.SyntheticEvent<{}>) => void - event The event source of the callback. |
onOpen* | func | - | Callback fired when the component requests to be opened. Signature: function(event: React.SyntheticEvent<{}>) => void - event The event source of the callback. |
allowSwipeInChildren | func | bool | false | If set to true, the swipe event will open the drawer even if the user begins the swipe on one of the drawer’s children. |
children | node | - | The content of the component. |
disableBackdropTransition | bool | false | Disable the backdrop transition. |
disableDiscovery | bool | false | If true , touching the screen near the edge of the drawer will not slide in the drawer. |
disableSwipeToOpen | bool | typeof navigator !== ‘undefined’ && /iPad|iPhone|iPod/.test(navigator.userAgent) | If true , swipe to open is disabled. |
hysteresis | number | 0.52 | Affects how far the drawer must be opened/closed to change its state. |
minFlingVelocity | number | 450 | Defines the velocity at which the swipe is considered complete. |
open | bool | false | If true , the component is shown. |
SwipeAreaProps | object | - | The element used to intercept the touch events on the edge. |
swipeAreaWidth | number | 20 | The width of the area in px that the drawer can be swiped open from. |
transitionDuration | number | { appear?: number, enter?: number, exit?: number } | { enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen } | The duration for the transition, in milliseconds. |
The props of the Drawer component are also available in SwipeableDrawer.
Class name | Rule name | Description |
---|---|---|
.MuiSwipeableDrawer-docked | docked | Styles applied to the root element if variant="permanent or persistent" . |
.MuiSwipeableDrawer-modal | modal | Styles applied to the Modal component. |
.MuiSwipeableDrawer-paper | paper | Styles applied to the Paper component. |
.MuiSwipeableDrawer-paperAnchorBottom | paperAnchorBottom | Styles applied to the Paper component if anchor="bottom" . |
.MuiSwipeableDrawer-paperAnchorDockedBottom | paperAnchorDockedBottom | Styles applied to the Paper component if anchor="bottom" and variant is not “temporary”. |
.MuiSwipeableDrawer-paperAnchorDockedLeft | paperAnchorDockedLeft | Styles applied to the Paper component if anchor="left" and variant is not “temporary”. |
.MuiSwipeableDrawer-paperAnchorDockedRight | paperAnchorDockedRight | Styles applied to the Paper component if anchor="right" and variant is not “temporary”. |
.MuiSwipeableDrawer-paperAnchorDockedTop | paperAnchorDockedTop | Styles applied to the Paper component if anchor="top" and variant is not “temporary”. |
.MuiSwipeableDrawer-paperAnchorLeft | paperAnchorLeft | Styles applied to the Paper component if anchor="left" . |
.MuiSwipeableDrawer-paperAnchorRight | paperAnchorRight | Styles applied to the Paper component if anchor="right" . |
.MuiSwipeableDrawer-paperAnchorTop | paperAnchorTop | Styles applied to the Paper component if anchor="top" . |
.MuiSwipeableDrawer-root | root | Styles applied to the root element. |
You can override the style of the component using:
styleOverrides
property in a custom theme