# ScrollTabsModule说明
*更新日期：2018-7-20 08:58:29*

*__author__*: Ximena Fan 自适应滚动标签导航。超出当前标签导航内容区域，出现左右箭头导航，点击显示隐藏标签，滑过导航给出隐藏标签的提示。超出当前标签内容区域时，可通过下拉显示标签。

*待处理* 
1. 内嵌Bootstrap下拉、提示模块，后期要增加自用下拉、提示模块，并从模块中独立出来
2. 样式采用默认Bootstrap的按钮、Tab，后期美化
3. 方法说明未写
***
### 使用示例
#### 在模块中引用
```
@NgModule({
  imports: [
    ScrollTabsModule.forRoot({ showDropDown: false } as ScrollTabConfig)
  ],
  declarations: [
   XXX
  ]
})
```
#### 在组件内部使用
```
  <app-scroll-tabs [tabs]='pageTabs'></app-scroll-tabs>
```

### 一、配置 DrawerConfig

**1. 属性说明:**

| 属性名 | 类型 | 默认值 |说明 |
| ------ | ------ | ------ |------ |
| showDropDown | `boolean` |  true 显示下拉菜单 | 是否启用下拉菜单|
| showTooltips | `boolean` |  true 显示提示信息 | 是否启用提示信息|
| scrollStep | `number` |  15  | 点击时滚动步长|
| autoResize | `boolean` |  true 自动计算宽度 | 当窗口大小改变的时候，是否自动重新计算宽度 |
| maxDropdownH | `number` |  200  | 下拉列表最大高度，非正值:自动计算高度|
| maxDropdownW | `number` |  -1  | 下拉列表最大宽度，非正值:自动计算宽度|
| maxTabW | `number` |  100 | 标签最大宽度：非正值表明不限制宽度置|
| maxTooltipLen |`number` |  5 | 提示信息条数|
**2. 修改配置属性:**

在模块引入时，修改整体配置
```
@NgModule({
  imports: [
    ScrollTabsModule.forRoot({ showDropDown: 600 } as ScrollTabConfig)
  ],
  declarations: [
   XXX
  ]
})
```
### 二、属性
**1. 属性说明:**
| 属性名 | 类型 | 说明 |
| ------ | ------ | ------ |
| showDropDown | `boolean` |  是否启用下拉框|
| showTooltips | `boolean` |   是否启用提示信息|
| scrollStep | `number` | 点击时滚动步长|
| autoResize | `boolean` | 当窗口大小改变的时候，是否自动重新计算宽度|
| tabs | `ScrollTabsTab[]` | 所有标签数据|
**2. ScrollTabsTab 引用 :**
```
import {ScrollTabsTab} from 'scroll-tabs.module';
```
**3. ScrollTabsTab 属性 :**
| 属性名 | 类型 | 说明 |
| ------ | ------ | ------ |
| id | `string` |  标识 |
| disabled | `boolean` | 是否禁用 |
| title | `boolean` | 标签显示文字 |
| data | `any` |  标签页展示的组件用到属性值 |
| component | `Type<any>` | 标签页展示组件的引用 | 
**3. 设定属性:**
```
  <app-scroll-tabs [tabs]='pageTabs' [showDropDown]="false"></app-scroll-tabs>
```
### 三、事件
**1. 事件参数类型引入:**
```
import {ScrollTabsTabChangeEvent,ScrollTabsRemoveTabEvent} from 'scroll-tabs.module';
```
**2. 事件参数类型:**
| 类型 | 说明 |
| ------ | ------ | ------ |
| ScrollTabsTabChangeEvent|切换标签时，抛出的事件类型|
||1. prevId`number` 原选中标签标识 |
||2. nextId`number` 现选中标签标识 |
| ScrollTabsRemoveTabEvent|删除标签时，抛出的事件类型|
||1.id：`string` 标签标识 |

**3. 支持事件:**
| 事件名 | 参数类型 | 说明 |
| ------ | ------ | ------ |
| tabChange | ScrollTabsTabChangeEvent | 切换标签时触发 |
| tabRemove | ScrollTabsRemoveTabEvent |删除标签时触发 |
**4. 绑定事件:**
```
<app-scroll-tabs ... (tabChange)="drawerClose($event)"   (tabRemove)="drawerResize($event)"></app-scroll-tabs>
```
### 更新时间
| 更新时间 | 更新内容 |
| ------ | ------ | 
| 2018年7月20日 | 1. 调整代码生成结构 2. 调整删除所有标签是抛出的id 3.增加属性 customClass,添加自定样式| 
| 2018年7月21日 | 1. 调整代码结构|