https://drawer-react-component.vercel.app/
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 |
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 |
afterVisibleChange | func | null | transition end callback(open) |
onClose | func | null | close click function |
keyboard | boolean | true | Whether support press esc to close |
contentWrapperStyle | CSSProperties | null | content wrapper style |
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
.
npm install
npm start