跳转到内容

SwipeableDrawer API

想要学习更多组件属性和 CSS API,可以查阅 React SwipeableDrawer 组件的 API 文档。

导入

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) => void
event: The event source of the callback.
onOpen*func
Callback fired when the component requests to be opened.

Signature:
function(event: object) => void
event: The event source of the callback.
open*boolfalse
Control the popup` open state.
childrennode
The content of the component.
disableBackdropTransitionboolfalse
Disable the backdrop transition. This can improve the FPS on low-end devices.
disableDiscoveryboolfalse
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.
disableSwipeToOpenbooltypeof 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.
hysteresisnumber0.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
minFlingVelocitynumber450
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
SwipeAreaPropsobject
The element is used to intercept the touch events on the edge.
swipeAreaWidthnumber20
The width of the left most (or right most) area in px that the drawer can be swiped open from.
transitionDurationnumber
| { 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 则会被传递到根元素中。

继承

尽管上文没有明文记录, Drawer 组件 的属性(props) 在组件SwipeableDrawer上同样是可用的。 你可以利用这一点来 指向嵌套组件

演示项目