npm package: @farris/drawer
Description: 抽屉组件
Author: ximena
Latest version: 0.0.1

# DrawerModule说明
*更新日期：2018-7-19 14:58:29*

*__author__*: Ximena Fan 抽屉模块，可展示在页面的左侧。通过切换Tab标签加载不同组件。整个抽屉，可拖拽，可展开收起。
##### 说明
1. 提交组件代码未压缩，可查看
2. 待处理：引入方式问题
***
### 使用示例
#### 在模块中引用
```
@NgModule({
  imports: [
    DrawerModule.forRoot({ defaultWidth: 600 } as DrawerConfig)
  ],
  declarations: [
   XXX
  ],
  entryComponents: [XXX, XXX]
})
```
#### 在组件内部使用
```
   <app-drawer [customClass]='"self-cls"' [close]=true 
    (closeEvent)="drawerClose($event)"  
    (resizeEvent)="drawerResize($event)"  
    (selectEvent)="drawerSelect($event)"
    [datas]="drawerdatas">
  </app-drawer>
```

### 一、配置 DrawerConfig

**1. 属性说明:**

| 属性名 | 类型 | 默认值 |说明 |
| ------ | ------ | ------ |------ |
| close | `boolean` |  false 抽屉展开 | 抽屉是展开还是收起|
| customClass | `string` |  空 | 自定义样式|
| enableDrag | `boolean` |  true 启用拖拽 | 是否启用拖拽功能|
| defaultWidth | `number` |  245 默认宽度 | 设置抽屉的宽度|
| minWidth | `number` |  200 最小宽度 | 设置拖拽后，抽屉的最小宽度|
| maxWidth | `number` |  360 最大宽度 | 设置拖拽后，抽屉的最大宽度|
| dragThreshold | `number` |  10 默认宽度 | 设置拖拽后，拖拽宽度超过阈值才移动位置|
| lessThanMin | `boolean` |  true 关闭 | 当拖动宽度小于最小值时，是收起true,还是展开false|
**2. 修改配置属性:**

在模块引入时，修改整体配置
```
@NgModule({
  imports: [
    DrawerModule.forRoot({ defaultWidth: 600 } as DrawerConfig)
  ],
  declarations: [
   XXX
  ],
  entryComponents: [XXX, XXX]
})
```
### 二、属性
**1. 属性说明:**
| 属性名 | 类型 | 默认值 |说明 |
| ------ | ------ | ------ |------ |
| close | `boolean` |  false 抽屉展开 | 抽屉是展开还是收起|
| customClass | `string` |  空 | 自定义样式|
| data | `DrawerItemData` |  空 | 抽屉下标签页数据|
| hide | `boolean` |  false | 抽屉是否隐藏|
**2. DrawerItemData 引用 :**
```
import {DrawerItemData} from 'drawer.module';
```
**3. DrawerItemData 属性 :**
| 属性名 | 类型 | 说明 |
| ------ | ------ | ------ |
| title | `string` |  标签页标题 |
| active | `boolean` | 标签页是否出于显示状态 |
| disabled | `boolean` | 标签页是否不可用 |
| data | `any` |  标签页展示的组件用到属性值 |
| component | `Type<any>` | 标签页展示组件的引用 | 
| resolver | `ComponentFactoryResolver` | 工厂函数用于创建组件 | 
**3. 设定属性:**
```
 <app-drawer [customClass]='"XXX"' [close]=true [data]="XXX"> </app-drawer>
```
### 三、事件
**1. 事件参数类型引入:**
```
import {DrawerResizeEvent,DrawerCloseEvent,  DrawerTabSelectEvent} from 'drawer.module';
```
**2. 事件参数类型:**
| 类型 | 说明 |
| ------ | ------ | ------ |
| DrawerResizeEvent|拖拽改变抽屉宽度时，抛出的事件类型|
||1. oldWidth：`number` 原宽度 |
||2. newWidth：`number` 新宽度 |
| DrawerCloseEvent|关闭展开抽屉时，抛出的事件类型|
||1. activeTab：`DrawerTabSelectEvent` 当前显示的Tab信息 |
||2. closeState：`boolean` 展开、收起状态。true：收起；false：展开 |
||3. width：`number` 展开、收起时抽屉的宽度。 |
| DrawerTabSelectEvent|选择标签时候，抛出的事件类型|
||1. index：`number` 标签索引 |
||2. title：`string` 标签标题 |

**3. 支持事件:**
| 事件名 | 参数类型 | 说明 |
| ------ | ------ | ------ |
| resizeEvent | DrawerResizeEvent | 拖拽改变抽屉宽度时触发事件 |
| closeEvent | DrawerCloseEvent |展开收起抽屉时触发 |
| selectEvent | DrawerTabSelectEvent |选择标签时触发 |
**4. 绑定事件:**
```
<app-drawer ... (closeEvent)="drawerClose($event)"   (resizeEvent)="drawerResize($event)"    (selectEvent)="drawerSelect($event)"></app-drawer>
```

### 更新时间
| 更新时间 | 更新内容 |
| ------ | ------ | 
| 2018年7月13日 | 1. 整个代码结构变动，上传压缩版本，解决run test时问题 | 
| 2018年7月19日 | 1. 增加hide属性 2.解决抽屉不能收起的问题 |