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. prevIdnumber 原选中标签标识 | ||2. nextIdnumber 现选中标签标识 | | 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. 调整代码结构|