rc-drawer

2020-01-15

rc-drawer

drawer component for react

rc-drawer


NPM versionbuild statuscodecovnode versionnpm download

Example

http://react-component.github.io/drawer/examples/

Usage

import Drawer from 'rc-drawer';
import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(
  <Drawer>
    {menu children}
  </Drawer>
, mountNode);

Install

rc-drawer

Browser Support

IEChromeFirefoxOperaSafari
IE 10+ ✔Chrome 31.0+ ✔Firefox 31.0+ ✔Opera 30.0+ ✔Safari 7.0+ ✔

API

propstypedefaultdescription
classNamestringnull-
prefixClsstring'drawer'prefix class
wrapperClassNamestringnullwrapper class name
widthstringnumbernull
heightstringnumbernull
openbooleanfalseopen or close menu
defaultOpenbooleanfalsedefault open menu
handlerbooleanReactElementtrue
placementstringleftlefttoprightbottom
levelstringarrayall
levelMovenumberarrayfunc
durationstring.3slevel animation duration
easestringcubic-bezier(0.78, 0.14, 0.15, 0.86)level animation timing function
getContainerstringfuncHTMLElement
showMaskbooleantruemask is show
maskClosablebooleantrueClicking on the mask (area outside the Drawer) to close the Drawer or not.
maskStyleCSSPropertiesnullmask style
onChangefuncnullchange callback(open)
afterVisibleChangefuncnulltransition end callback(open)
onClosefuncnullclose click function
onHandleClickfuncnulhandle icon click function
keyboardBooleantrueWhether support press esc to close

2.0 Rename onMaskClick-> onClose, add maskClosable.

Development

npm install
npm start

以上是 rc-drawer 的使用教程帮助文档。


上一篇:rc-slider
下一篇:rc-collapse
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部