UNPKG

4.09 kBMarkdownView Raw
1# rc-drawer
2
3[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![codecov](https://codecov.io/gh/react-component/drawer/branch/master/graph/badge.svg)](https://codecov.io/gh/react-component/drawer) [![node version][node-image]][node-url] [![npm download][download-image]][download-url]
4
5[npm-image]: http://img.shields.io/npm/v/rc-drawer.svg?style=flat-square
6[npm-url]: http://npmjs.org/package/rc-drawer
7[github-actions-image]: https://github.com/react-component/drawer/workflows/CI/badge.svg
8[github-actions-url]: https://github.com/react-component/drawer/actions
9[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
10[node-url]: http://nodejs.org/download/
11[download-image]: https://img.shields.io/npm/dm/rc-drawer.svg?style=flat-square
12[download-url]: https://npmjs.org/package/rc-drawer
13
14## Example
15
16https://drawer-react-component.vercel.app/
17
18## Usage
19
20```js
21import Drawer from 'rc-drawer';
22import React from 'react';
23import ReactDom from 'react-dom';
24
25ReactDom.render(
26 <Drawer>
27 {menu children}
28 </Drawer>
29, mountNode);
30```
31
32## Install
33
34[![rc-drawer](https://nodei.co/npm/rc-drawer.png)](https://npmjs.org/package/rc-drawer)
35
36## Browser Support
37
38|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|
39| --- | --- | --- | --- | --- |
40| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
41
42## API
43
44| props | type | default | description |
45|------------|----------------|---------|----------------|
46| className | string | null | - |
47| prefixCls | string | 'drawer' | prefix class |
48| wrapperClassName | string | null | wrapper class name |
49| width | string \| number | null | drawer content wrapper width, drawer level transition width |
50| height | string \| number | null | drawer content wrapper height, drawer level transition height |
51| open | boolean | false | open or close menu |
52| defaultOpen | boolean | false | default open menu |
53| handler | boolean \| ReactElement | true | true or false or ReactElement, default: `<divclassName="drawer-handle"><i className="drawer-handle-icon" /></div>`; |
54| placement | string | `left` | `left` `top` `right` `bottom` |
55| level | string \| array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
56| levelMove | number \| array \| func | null |level move value. default is drawer width |
57| duration | string | `.3s` | level animation duration |
58| ease | string | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function |
59| getContainer | string \| func \| HTMLElement | `body` | Return the mount node for Drawer. if is `null` use React.creactElement |
60| showMask | boolean | true | mask is show |
61| maskClosable | boolean | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. |
62| maskStyle | CSSProperties | null | mask style |
63| onChange | func | null | change callback(open) |
64| afterVisibleChange | func | null | transition end callback(open) |
65| onClose | func | null | close click function |
66| onHandleClick | func | nul | handle icon click function |
67| keyboard | Boolean | true | Whether support press esc to close |
68| contentWrapperStyle | CSSProperties | null | content wrapper style |
69| autoFocus | Boolean | true | Whether focusing on the drawer after it opened |
70
71> 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`.
72
73## Development
74
75```
76npm install
77npm start
78```