0 Tk

swipeable-drawer

Import

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.

Props

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.

Inheritance

The props of the Drawer component are also available in SwipeableDrawer.

CSS

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.

Customization

You can override the style of the component using:

Source Code

View the implementation of the component