SwipeableDrawer API
想要学习更多组件属性和 CSS API，可以查阅 React SwipeableDrawer 组件的 API 文档。
演示项目
For examples and details on the usage of this React component, visit the component demo pages:
导入
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
// 或
import { SwipeableDrawer } from '@mui/material';属性
Drawer 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| onClose* | func | Callback fired when the component requests to be closed. Signature: function(event: object) => voidevent: The event source of the callback. | |
| onOpen* | func | Callback fired when the component requests to be opened. Signature: function(event: object) => voidevent: The event source of the callback. | |
| open* | bool | false | Control the popup` open state. |
| children | node | The content of the component. | |
| disableBackdropTransition | bool | false | Disable the backdrop transition. This can improve the FPS on low-end devices. |
| disableDiscovery | bool | false | If true, touching the screen near the edge of the drawer will not slide in the drawer a bit to promote accidental discovery of the swipe gesture. |
| disableSwipeToOpen | bool | typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) | If true, swipe to open is disabled. This is useful in browsers where swiping triggers navigation actions. Swipe to open is disabled on iOS browsers by default. |
| hysteresis | number | 0.52 | Affects how far the drawer must be opened/closed to change its state. Specified as percent (0-1) of the width of the drawer |
| minFlingVelocity | number | 450 | Defines, from which (average) velocity on, the swipe is defined as complete although hysteresis isn't reached. Good threshold is between 250 - 1000 px/s |
| SwipeAreaProps | object | The element is used to intercept the touch events on the edge. | |
| swipeAreaWidth | number | 20 | The width of the left most (or right most) 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. You may specify a single timeout for all transitions, or individually with an object. |
ref 则会被传递到根元素中。