http://react-component.github.io/drawer/examples/
import Drawer from 'rc-drawer';
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<Drawer>
{menu children}
</Drawer>
, mountNode);
IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
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 | object | null | mask style | ||
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 |
1.5 Rename
handleChild
->handler
, removehandleStyle
, removelevelTransition
->duration
ease
, addlevelMove
.
npm install
npm start