GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → react-component → Drawer

react-component / Drawer

Licence: mit
React Drawer

Programming Languages

typescript
32286 projects

rc-drawer

NPM version build status codecov node version npm download

Example

https://rc-drawer.react-component.now.sh

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

IE Chrome Firefox Opera Safari
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

2.0 Rename onMaskClick -> onClose, add maskClosable.

Development

npm install
npm start
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].