Rc-drawer NPM | npm.io

7.1.0 • Published 3 months ago

Install

Weekly downloads

534,101

License

MIT

Repository

Last release

3 months ago

rc-drawer

Example

https://drawer-react-component.vercel.app/

Usage

import Drawer from '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	-
classNames	{ mask?: string; content?: string; wrapper?: string; }	-	pass className to target area
styles	{ mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; }	-	pass style to target area
prefixCls	string	'drawer'	prefix class
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
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, add maskClosable.

Development

npm install
npm start

react react-component react-drawer drawer drawer-menu rc-drawer-menu react-drawer-menu animation drawer-motion drawer-animation

@babel/runtime @rc-component/portal classnames rc-motion rc-util

@grafana/ui @titaui/pc test-g-pc @bushuai/uni-test yzhantd tuns-mobile-form antd-zp g2_v587_gv587_admin jdc-rc-common test-rc-common find-react uibot-ui-antd @caoyongmeng/ui-1 bigendianui signpl signpl-test ybbtestui1 @netty0911/rc-drawer @paraponera/antd mdt-design addnewer-ui antds ebd-test xc-mobile xcmobiles @voplus/antd @cliffdotai/atomic onlinex-test @dibanka/demo xqshoutenn-ui @baolq/antd guree-ui sia-antd maycur-antd luck-design-test gatsby-theme-fencing @everything-registry/sub-chunk-2535 intelligent-design @devfamily/admiral @datlas/design @dibanka/ui fan.zhang-design feitud fis-msprd-msbu-ui-react fkitd fish-h5 findingpi-react-components food_truck front_kit_humann ftaui dq-antd doupio dingtalk-design-desktop even-antd etd-antd @haravan/react-components @hcltmac/core @gio-design/components huaxin-antd @gotrip/uikit @greenatom/antd idm-react-antd @gutenye/antd-mobile igroot ichintui inspection-agent-ljp infrad hz-antd hztd @grafarg/ui @gd-uikit/antd hrwuucc @galiojs/antd @gsaandy/antd @greendeck/atomic-rakuten @greendeck/atomic idoll @huangming1994/antd-mobile dumi-theme-antd-web3 dumi-theme-nocobase dumi-theme-antd dumi-theme-antd-fork dt-react-component dtd dtd-test dtd-loose dumi-theme-yizhu dumi-theme-digiforce dumi-theme-digimate dumi-theme-dp dumi-theme-dyeing dumi-theme-karinpoky @escolalms/components @eubank/kit-drawer grafana-ui gatsby-theme-iot gatsby-theme-hansin gatsby-theme-nestx @easyv/antd

3 months ago

4 months ago

7 months ago

7 months ago

7 months ago

11 months ago

10 months ago

9 months ago

9 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago

8 years ago