SwipeableDrawer API
Documentação da API para o componente React SwipeableDrawer . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
// ou
import { SwipeableDrawer } from '@mui/material';Propriedades
Propriedades do componente Drawer também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| 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 | O conteúdo do componente. | |
| 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. |
O
ref é encaminhado para o elemento raiz.