ng-scroll-tabs

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. 调整代码结构