Package Exports
- rc-drawer
- rc-drawer/assets/index.css
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-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
http://react-component.github.io/drawer/examples/
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 | - |
prefixCls | string | 'drawer' | prefix class |
wrapperClassName | string | null | wrapper class name |
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 |
handler | boolean | ReactElement | true | true or false or ReactElement, default: <divclassName="drawer-handle"><i className="drawer-handle-icon" /></div> ; |
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 |
drawerStyle | CSSProperties | null | style of the drawer popup element |
onChange | func | null | change callback(open) |
afterVisibleChange | func | null | transition end callback(open) |
onClose | func | null | close click function |
onHandleClick | func | nul | handle icon click function |
keyboard | Boolean | true | Whether support press esc to close |
2.0 Rename
onMaskClick
->onClose
, addmaskClosable
.
Development
npm install
npm start