Drawer Examples
import Drawer from 'rb-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 |
CSSProperties |
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 |
2.0 Rename onMaskClick -> onClose, add maskClosable.