dw-neit-rc-drawer
v5.1.0
Published
drawer component for react
Downloads
96
Maintainers
Readme
dw-neit-rc-drawer
Example
https://drawer-react-component.vercel.app/
Usage
import Drawer from 'dw-neit-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 |
| 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 |
| contentWrapperStyle | CSSProperties | null | content wrapper style |
| autoFocus | Boolean | true | Whether focusing on the drawer after it opened |
2.0 Rename
onMaskClick
->onClose
, addmaskClosable
.
Development
npm install
npm start