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