@rdkmaster/jigsaw-labs

import { QueryList, AfterViewInit, EventEmitter, TemplateRef, ViewContainerRef, ComponentFactoryResolver, Type, ChangeDetectorRef, AfterViewChecked, ElementRef } from '@angular/core'; import { JigsawTabPane } from "./tab-pane"; import { JigsawTabContent, TabTitleInfo } from "./tab-item"; import { AbstractJigsawComponent, IDynamicInstantiatable } from "../common"; import { PopupService } from "../../service/popup.service"; /** * 使用`JigsawTab`来将一组视图叠加在同一个区域使用，并以页签的方式来切换这些视图。 * `JigsawTab`提供了多个api用于动态创建、销毁、隐藏tab页， * 这些是利用`JigsawTab`实现复杂、交互密集的视图的有力工具。 * * 如果需要动态增减的视图内容形式比较单一，也可以通过`ng-for`来实现tab动态化， * 参考[这个demo]($demo=tab/with-ngfor)。 * * $demo = tab/basic * $demo = tab/update-title * $demo = tab/with-input */ export declare class JigsawTab extends AbstractJigsawComponent implements AfterViewInit, AfterViewChecked { private _cfr; private _changeDetector; private _viewContainer; private _elementRef; private _popupService; constructor(_cfr: ComponentFactoryResolver, _changeDetector: ChangeDetectorRef, _viewContainer: ViewContainerRef, _elementRef: ElementRef, _popupService: PopupService); /** * @internal */ _$tabPanes: QueryList<JigsawTabPane>; private _tabLabels; /** * @internal */ _tabContents: QueryList<JigsawTabContent>; /** * 当所选的tab页发生变化时发出此事件，事件携带的是被选中的tab页实例， * 如果需要索引值，请使用`selectedIndexChange`事件。 * * @type {EventEmitter<JigsawTabPane>} */ selectChange: EventEmitter<JigsawTabPane>; /** * 删除tab时，发出事件，携带删除的tab索引值 * * $demo = tab/editable * * @type {EventEmitter<number>} */ remove: EventEmitter<number>; /** * 发送add事件，携带tabs的实例 * * $demo = tab/editable * * @type {EventEmitter<JigsawTab>} */ add: EventEmitter<JigsawTab>; /** * 改变tab标题时发送此事件，事件携带一个`TabTitleInfo`类型的数据。 * * @type {EventEmitter<TabTitleInfo>} */ titleChange: EventEmitter<TabTitleInfo>; private _tabsInkBar; /** * 控制tab显示添加和删除按钮 * * $demo = tab/editable * * @type {boolean} */ editable: boolean; _$headless: boolean; /** * 控制tab头部是否显示 * * $demo = tab/headless * * @type {boolean} */ headless: boolean; enableAnimation: boolean; /** * 当前的tab页数量，包含被隐藏的tab页 */ length: number; /** * tab页点击 * @internal */ _$tabClick(index: any): void; /** * @internal */ _$selectedIndex: number; /** * 当前选中的tab页编号，在双绑模式下，改变这个值可以实现选中tab页的切换。 * @returns {number} */ selectedIndex: number; /** * 当前选中的tab页编号发生变化时，发出此事件。 * 事件携带的是索引值，如果需要获取更多信息，请参考`selectChange`事件。 * * @type {EventEmitter<number>} */ selectedIndexChange: EventEmitter<number>; private _handleSelectChange(index); /** * @internal */ _$inkBarStyle: object; private _setInkBarStyle(index); private _getLabelOffsetByKey(key); private _getTabPaneByIndex(key); private _autoSelect(); private _asyncSetStyle(index); /** * @internal */ _$handleAdd(): void; /** * @internal */ _$handleRemove(index: any): void; /** * @internal */ _$contentHeight: string; ngOnInit(): void; private _calulateContentHeight(); private _tabLabelsChangeHandler; ngAfterViewInit(): void; ngOnDestroy(): void; ngAfterViewChecked(): void; /** * 隐藏对应的Tab页，使用户在界面上看不到它，页无法对它做操作。 * 注意这个方法不会销毁tab页内的组件，如果需要销毁tab页，请使用`removeTab`。 * 被隐藏的tab页可以通过`showTab`方法让他们再次显示出来。 * * $demo = tab/api * $demo = tab/hide-tab * * @param {number} index tab页的编号，从0开始 */ hideTab(index: number): void; /** * 将对应的Tab页切换为激活状态，当指定的tab页是隐藏状态时，它将被设置为正常状态并被激活。 * * $demo = tab/api * $demo = tab/show-tab * * @param {number} index tab页的编号，从0开始 */ showTab(index: number): void; private _isTabPane(tabPane); /** * 通过编程的方式添加一个新的tab页 * * $demo = tab/api * * @param {string} titleString 以一个简单的字符串作为标题 * @param {TemplateRef<any>} contentTemplate 以一个`ng-template`标签包围起来的模板作为tab页的内容， * 当tab页的内容比较简单时，建议采用此方式。 * @param {Object} initData 提供给`contentTemplate`的初始化数据 * @param {boolean} activateImmediately 是否立即激活新增的Tab页，默认值是`true` */ addTab(titleString: string, contentTemplate: TemplateRef<any>, initData?: Object, activateImmediately?: boolean): any; /** * @param {TemplateRef<any>} titleTemplate 以一个`ng-template`标签包围起来的模板作为标题， * 这样可以彻底定制化新增的tab的标题部分，例如加图标，甚至添加按钮、进度条等复杂视图。 * @param {TemplateRef<any>} contentTemplate * @param {Object} initData * @param {boolean} activateImmediately */ addTab(titleTemplate: TemplateRef<any>, contentTemplate: TemplateRef<any>, initData?: Object, activateImmediately?: boolean): any; /** * @param {Type<IDynamicInstantiatable>} titleComponent 以一个组件作为标题，这样可以彻底定制化新增的tab的标题部分， * 例如加图标，甚至添加按钮、进度条等复杂视图。 * @param {TemplateRef<any>} contentTemplate * @param {Object} initData * @param {boolean} activateImmediately */ addTab(titleComponent: Type<IDynamicInstantiatable>, contentTemplate: TemplateRef<any>, initData?: Object, activateImmediately?: boolean): any; /** * @param {string} titleString * @param {Type<IDynamicInstantiatable>} contentComponent 以一个组件作为tab页的内容， * 如果新增的tab页内容比较复杂，建议采用此方式添加，以让各部分代码的耦合解开。 * @param {Object} initData * @param {boolean} activateImmediately */ addTab(titleString: string, contentComponent: Type<IDynamicInstantiatable>, initData?: Object, activateImmediately?: boolean): any; /** * @param {TemplateRef<any>} titleTemplate * @param {Type<IDynamicInstantiatable>} contentComponent * @param {Object} initData * @param {boolean} activateImmediately */ addTab(titleTemplate: TemplateRef<any>, contentComponent: Type<IDynamicInstantiatable>, initData?: Object, activateImmediately?: boolean): any; /** * @param {Type<IDynamicInstantiatable>} titleComponent * @param {Type<IDynamicInstantiatable>} contentComponent * @param {Object} initData * @param {boolean} activateImmediately */ addTab(titleComponent: Type<IDynamicInstantiatable>, contentComponent: Type<IDynamicInstantiatable>, initData?: Object, activateImmediately?: boolean): any; /** * 销毁指定的Tab页，注意此操作不可恢复，可以使用`hideTab`来隐藏一个tab页，而非销毁它。 * * $demo = tab/destroy-tab * $demo = tab/api * * @param index 目标tab页的编号，从0开始计数。 */ removeTab(index: any): void; /** * 当没有指定选择哪个tab时自动处理选中的函数: * 使用场景: * 1. 隐藏了当前选中的tab-pane * 2. 删除了当前的tab-pane * 规则: 1. 最后一个非disabled的tabPane * 2. 否则隐藏tab 条. * @private */ private _handleSelect(); /** * @internal */ _$showOverflowButton: boolean; private _tabsListPopupInfo; private _popupTimeout; /** * @internal */ _$popupTabList(tabsList: any, event: any, overflowButton: any): void; /** * @internal */ _$menuAreaLeave(): void; /** * @internal */ _$clearPopupTimeout(): void; /** * @internal */ _$selectTabStyle: object; /** * @internal */ _$listOptionClick(index: any): void; /** * @internal */ _$tabList: any[]; private _tabLeftMap; private _createTabList(); private _updateTitlePosition(index); private _tabsNavWrap; private _tabsNav; private _updateOverflowButton(); onResize(): void; }