swipeable-drawer

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

64,532

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

38 KB

Demos:

Drawer

React

UI Components

2 contributors

Install swipeable-drawer as a package?

Copied

npm i @bit/mui-org.material-ui.swipeable-drawer

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

swipeableDrawer ()

Demos:

Drawers

API:

SwipeableDrawer API
inherits Drawer API

Properties

Name	Type	Description
anchor (required)	`'left' \| 'top' \| 'right' \| 'bottom'`	Side on which to attach the discovery area.
classes (required)	`object`
className	`string`
width (required)	`number`	The width of the left most (or right most) area in pixels where the drawer can be swiped open from.
anchor	`'left' \| 'top' \| 'right' \| 'bottom'`
children	`node`	The content of the component.
disableBackdropTransition	`bool`	Disable the backdrop transition. This can improve the FPS on low-end devices.
disableDiscovery	`bool`	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`	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.
hideBackdrop	`bool`
hysteresis	`number`	Affects how far the drawer must be opened/closed to change his state. Specified as percent (0-1) of the width of the drawer
minFlingVelocity	`number`	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
ModalProps	`{"BackdropProps":"{\"component\":\"custom\"}"}`
onClose (required)	`function`	The event source of the callback.
onOpen (required)	`function`	The event source of the callback.
open (required)	`bool`	If `true`, the drawer is open.
PaperProps	`{"component":"custom","style":"object"}`
SwipeAreaProps	`object`	The element is used to intercept the touch events on the edge.
swipeAreaWidth	`number`	The width of the left most (or right most) area in pixels where the drawer can be swiped open from.
transitionDuration	`number \| {"enter":"number","exit":"number"}`	The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object.
variant	`'permanent' \| 'persistent' \| 'temporary'`