0.0.3 • Published 4 years ago

ac-drawer v0.0.3

Weekly downloads
17
License
MIT
Repository
github
Last release
4 years ago

ac-drawer

npm version NPM downloads

1. 简介

一个基于react的抽屉组件,可以从上下左右这些侧面弹出一个层,显示特定的内容

2. 安装

npm install ac-drawer -S

3. 使用

import Drawer from 'ac-drawer';
import 'ac-drawer/dist/ac-drawer.css';
<Drawer title={'basic drawer'} show={true} placement={'right'} onClose={this.fCloseDrawer}>
    <div className="con">
        <p>这是第一行文字</p>
        <p>这是第二行文字</p>
        <p>这是第三行文字,啦啦啦~</p>                                                 
    </div>
</Drawer>

更多用法可以参考demo文件夹中的示例

4. 预览

5. 参数

ParameterTypeDefaultDescription
showstring是否显示抽屉组件
placementstringright抽屉的位置。有四个预置的选项: left,right,top,bottom
hasHeaderbooleantrue是否显示抽屉的头部
titlestring抽屉的头部的标题
classNamestring抽屉容器的class, 用来自定义组件样式
showMaskbooleantrue是否显示遮罩
maskClosablebooleanfalse点击遮罩是否可以关闭抽屉
zIndexnumber100000抽屉容器的层级,可以修改层级
showClosebooleanfalse是否显示关闭按钮
widthnumber string抽屉的宽度
heightnumber string抽屉的高度
destroyOnCloseboolean关闭时候是否销毁抽屉的内容