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

xy-drawer

抽屉组件, 从屏幕边缘滑出的浮层面板.

何时使用

抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

• 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
• 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

特性

• [x] 能够指定窗体, 默认是 body 下创建一个空的 div
• [x] 能够指定moveSelector, 让窗口仿佛推动了指定 div 的距离
• [x] 指定宽度或高度, 在上下方向时候, 应该指定高度
• [x] 可以定义滑出位置, 屏幕的上下左右
• [x] 关闭时候是否销毁内部元素
• [x] 蒙层是否显示, 是否能点击关闭
• [x] 事件回调
• [x] 多层次嵌套, 往前推

安装

# yarn
yarn add xy-drawer

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { Drawer } from "xy-drawer";
import "xy-drawer/assets/index.css";
ReactDOM.render(<Drawer open={true} />, container);

js 方式调用

import React from "react";
import ReactDOM from "react-dom";
import { DrawerPopup } from "xy-drawer";

DrawerPopup({
    children: <p>js弹出的抽屉</p>,
});

API

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-drawer is released under the MIT license.