Package Exports
- @rc-component/drawer
- @rc-component/drawer/es/index.js
- @rc-component/drawer/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rc-component/drawer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
rc-drawer
Example
https://drawer-react-component.vercel.app/
Usage
import Drawer from 'rc-drawer';
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<Drawer>
{menu children}
</Drawer>
, mountNode);
Install
Browser Support
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
API
props | type | default | description |
---|---|---|---|
className | string | null | - |
classNames | { mask?: string; content?: string; wrapper?: string; } | - | pass className to target area |
styles | { mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | - | pass style to target area |
prefixCls | string | 'drawer' | prefix class |
width | string | number | null | drawer content wrapper width, drawer level transition width |
height | string | number | null | drawer content wrapper height, drawer level transition height |
open | boolean | false | open or close menu |
defaultOpen | boolean | false | default open menu |
placement | string | left |
left top right bottom |
level | string | array | all |
With the drawer level element. all / null / className / id / tagName / array |
levelMove | number | array | func | null | level move value. default is drawer width |
duration | string | .3s |
level animation duration |
ease | string | cubic-bezier(0.78, 0.14, 0.15, 0.86) |
level animation timing function |
getContainer | string | func | HTMLElement | body |
Return the mount node for Drawer. if is null use React.creactElement |
showMask | boolean | true | mask is show |
maskClosable | boolean | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. |
maskStyle | CSSProperties | null | mask style |
afterOpenChange | func | null | transition end callback(open) |
onClose | func | null | close click function |
keyboard | boolean | true | Whether support press esc to close |
autoFocus | boolean | true | Whether focusing on the drawer after it opened |
onMouseEnter | React.MouseEventHandler<HTMLDivElement> | - | Trigger when mouse enter drawer panel |
onMouseOver | React.MouseEventHandler<HTMLDivElement> | - | Trigger when mouse over drawer panel |
onMouseLeave | React.MouseEventHandler<HTMLDivElement> | - | Trigger when mouse leave drawer panel |
onClick | React.MouseEventHandler<HTMLDivElement> | - | Trigger when mouse click drawer panel |
onKeyDown | React.MouseEventHandler<HTMLDivElement> | - | Trigger when mouse keydown on drawer panel |
onKeyUp | React.MouseEventHandler<HTMLDivElement> | - | Trigger when mouse keyup on drawer panel |
2.0 Rename
onMaskClick
->onClose
, addmaskClosable
.
Development
npm install
npm start