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 |
|
16 | https://drawer-react-component.vercel.app/
|
17 |
|
18 | ## Usage
|
19 |
|
20 | ```js
|
21 | import Drawer from 'rc-drawer';
|
22 | import React from 'react';
|
23 | import ReactDom from 'react-dom';
|
24 |
|
25 | ReactDom.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 | | placement | string | `left` | `left` `top` `right` `bottom` |
|
54 | | level | string \| array | `all` | With the drawer level element. `all`/ null / className / id / tagName / array |
|
55 | | levelMove | number \| array \| func | null |level move value. default is drawer width |
|
56 | | duration | string | `.3s` | level animation duration |
|
57 | | ease | string | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` | level animation timing function |
|
58 | | getContainer | string \| func \| HTMLElement | `body` | Return the mount node for Drawer. if is `null` use React.creactElement |
|
59 | | showMask | boolean | true | mask is show |
|
60 | | maskClosable | boolean | true | Clicking on the mask (area outside the Drawer) to close the Drawer or not. |
|
61 | | maskStyle | CSSProperties | null | mask style |
|
62 | | onChange | func | null | change callback(open) |
|
63 | | afterVisibleChange | func | null | transition end callback(open) |
|
64 | | onClose | func | null | close click function |
|
65 | | keyboard | Boolean | true | Whether support press esc to close |
|
66 | | contentWrapperStyle | CSSProperties | null | content wrapper style |
|
67 | | autoFocus | Boolean | true | Whether focusing on the drawer after it opened |
|
68 |
|
69 | > 2.0 Rename `onMaskClick` -> `onClose`, add `maskClosable`.
|
70 |
|
71 | ## Development
|
72 |
|
73 | ```
|
74 | npm install
|
75 | npm start
|
76 | ```
|