page-drawer v1.0.7

PageDrawerModule说明

更新日期：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. 属性说明:

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> | 标签页展示组件的引用 | 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>

更新时间