ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
144 lines (143 loc) • 12.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
import { Component, Input, ContentChildren, QueryList, HostBinding } from '@angular/core';
import { TabPane } from '../tabs/tab-pane.component';
import { TabBarTab } from './tab-bar-tab.component';
/** @typedef {?} */
var TabBarPositionType;
export { TabBarPositionType };
export class TabBar {
constructor() {
this.prefixCls = 'am-tab-bar';
this._tintColor = '#108ee9';
this._unselectedTintColor = '#888';
this.hidden = false;
this.activeTab = 0;
this.barTintColor = 'white';
this.tabBarPosition = 'bottom';
this.tabBar = true;
}
/**
* @return {?}
*/
get tintColor() {
return this._tintColor;
}
/**
* @param {?} color
* @return {?}
*/
set tintColor(color) {
this._tintColor = color;
if (this.tabBarTabs && this.tabBarTabs.length > 0) {
this.tabBarTabs.forEach((tabBarTab) => {
tabBarTab.tintColor = this._tintColor;
});
}
}
/**
* @return {?}
*/
get unselectedTintColor() {
return this._unselectedTintColor;
}
/**
* @param {?} color
* @return {?}
*/
set unselectedTintColor(color) {
this._unselectedTintColor = color;
if (this.tabBarTabs && this.tabBarTabs.length > 0) {
this.tabBarTabs.forEach((tabBarTab) => {
tabBarTab.unselectedTintColor = this._unselectedTintColor;
});
}
}
/**
* @param {?} index
* @return {?}
*/
selectTabPane(index) {
this.tabPanes.forEach((tabPane, indexKey) => {
if (index < indexKey) {
tabPane.position = 'right-without-animation';
}
else if (index > indexKey) {
tabPane.position = 'left-without-animation';
}
else {
tabPane.position = 'center-without-animation';
}
if (index !== indexKey) {
tabPane.active = false;
}
else {
tabPane.active = true;
}
});
if (this.tabBarTabs && this.tabBarTabs.length > 0) {
this.tabBarTabs.forEach((tabBarTab) => {
tabBarTab.selected = false;
});
this.tabBarTabs.toArray()[index].selected = true;
this.tabBarTabs.toArray()[index].onPress.emit({
title: this.tabBarTabs.toArray()[index].title,
key: this.tabBarTabs.toArray()[index].key
});
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.selectTabPane(this.activeTab);
this.tabPanes.forEach((tabPane) => {
tabPane.tintColor = this.tintColor;
tabPane.unselectedTintColor = this.unselectedTintColor;
});
}
}
TabBar.decorators = [
{ type: Component, args: [{
selector: 'TabBar, nzm-tab-bar',
template: "<Tabs [activeTab]=\"activeTab\"\n [swipeable]=\"false\"\n [useOnPan]=\"false\"\n [animated]=\"false\"\n [tabDirection]=\"'horizontal'\"\n [tabBarPosition]='tabBarPosition'\n [renderTabBar]=\"TabBarBar\"\n [tabPanesComponent]=\"tabPanes\"\n>\n <ng-content></ng-content>\n</Tabs>\n\n<ng-template #TabBarBar>\n <div class=\"am-tabs-tab-bar-wrap\">\n <div class=\"{{prefixCls}}-bar\"\n [ngClass]=\"{'am-tab-bar-bar-hidden-top': 'top' === tabBarPosition && hidden, 'am-tab-bar-bar-hidden-bottom': 'bottom' === tabBarPosition && hidden}\"\n [style.background-color]=\"barTintColor\">\n <div *ngFor=\"let tabPane of tabPanes; let i = index;\" (click)=\"selectTabPane(i)\">\n <ng-container [ngTemplateOutlet]=\"tabPane.title\"></ng-container>\n </div>\n </div>\n </div>\n</ng-template>"
}] }
];
/** @nocollapse */
TabBar.ctorParameters = () => [];
TabBar.propDecorators = {
tabPanes: [{ type: ContentChildren, args: [TabPane, { descendants: true },] }],
tabBarTabs: [{ type: ContentChildren, args: [TabBarTab, { descendants: true },] }],
hidden: [{ type: Input }],
activeTab: [{ type: Input }],
barTintColor: [{ type: Input }],
tabBarPosition: [{ type: Input }],
tintColor: [{ type: Input }],
unselectedTintColor: [{ type: Input }],
tabBar: [{ type: HostBinding, args: ['class.am-tab-bar',] }]
};
if (false) {
/** @type {?} */
TabBar.prototype.prefixCls;
/** @type {?} */
TabBar.prototype._tintColor;
/** @type {?} */
TabBar.prototype._unselectedTintColor;
/** @type {?} */
TabBar.prototype.tabPanes;
/** @type {?} */
TabBar.prototype.tabBarTabs;
/** @type {?} */
TabBar.prototype.hidden;
/** @type {?} */
TabBar.prototype.activeTab;
/** @type {?} */
TabBar.prototype.barTintColor;
/** @type {?} */
TabBar.prototype.tabBarPosition;
/** @type {?} */
TabBar.prototype.tabBar;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZy16b3Jyby1hbnRkLW1vYmlsZS8iLCJzb3VyY2VzIjpbInRhYi1iYXIvdGFiLWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQW9CLEtBQUssRUFBRSxlQUFlLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1RyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDckQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7O0FBUXBELE1BQU07SUErQ0o7eUJBOUNvQixZQUFZOzBCQUVILFNBQVM7b0NBQ0MsTUFBTTtzQkFRM0IsS0FBSzt5QkFFSCxDQUFDOzRCQUVFLE9BQU87OEJBRU8sUUFBUTtzQkEyQjNCLElBQUk7S0FFTjs7OztJQTVCaEIsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDO0tBQ3hCOzs7OztJQUNELElBQUksU0FBUyxDQUFDLEtBQWE7UUFDekIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7UUFDeEIsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNqRCxJQUFJLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDLFNBQW9CLEVBQUUsRUFBRTtnQkFDL0MsU0FBUyxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDO2FBQ3ZDLENBQUMsQ0FBQztTQUNKO0tBQ0Y7Ozs7SUFDRCxJQUNJLG1CQUFtQjtRQUNyQixPQUFPLElBQUksQ0FBQyxvQkFBb0IsQ0FBQztLQUNsQzs7Ozs7SUFDRCxJQUFJLG1CQUFtQixDQUFDLEtBQWE7UUFDbkMsSUFBSSxDQUFDLG9CQUFvQixHQUFHLEtBQUssQ0FBQztRQUNsQyxJQUFJLElBQUksQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFVBQVUsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ2pELElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLENBQUMsU0FBb0IsRUFBRSxFQUFFO2dCQUMvQyxTQUFTLENBQUMsbUJBQW1CLEdBQUcsSUFBSSxDQUFDLG9CQUFvQixDQUFDO2FBQzNELENBQUMsQ0FBQztTQUNKO0tBQ0Y7Ozs7O0lBT0QsYUFBYSxDQUFDLEtBQWE7UUFDekIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsQ0FBQyxPQUFnQixFQUFFLFFBQWdCLEVBQUUsRUFBRTtZQUMzRCxJQUFJLEtBQUssR0FBRyxRQUFRLEVBQUU7Z0JBQ3BCLE9BQU8sQ0FBQyxRQUFRLEdBQUcseUJBQXlCLENBQUM7YUFDOUM7aUJBQU0sSUFBSSxLQUFLLEdBQUcsUUFBUSxFQUFFO2dCQUMzQixPQUFPLENBQUMsUUFBUSxHQUFHLHdCQUF3QixDQUFDO2FBQzdDO2lCQUFNO2dCQUNMLE9BQU8sQ0FBQyxRQUFRLEdBQUcsMEJBQTBCLENBQUM7YUFDL0M7WUFDRCxJQUFJLEtBQUssS0FBSyxRQUFRLEVBQUU7Z0JBQ3RCLE9BQU8sQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO2FBQ3hCO2lCQUFNO2dCQUNMLE9BQU8sQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO2FBQ3ZCO1NBQ0YsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNqRCxJQUFJLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDLFNBQW9CLEVBQUUsRUFBRTtnQkFDL0MsU0FBUyxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7YUFDNUIsQ0FBQyxDQUFDO1lBQ0gsSUFBSSxDQUFDLFVBQVUsQ0FBQyxPQUFPLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1lBQ2pELElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztnQkFDNUMsS0FBSyxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsS0FBSztnQkFDN0MsR0FBRyxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsT0FBTyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsR0FBRzthQUMxQyxDQUFDLENBQUM7U0FDSjtLQUNGOzs7O0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1FBQ25DLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLENBQUMsT0FBZ0IsRUFBRSxFQUFFO1lBQ3pDLE9BQU8sQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQztZQUNuQyxPQUFPLENBQUMsbUJBQW1CLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixDQUFDO1NBQ3hELENBQUMsQ0FBQztLQUNKOzs7WUF0RkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxxQkFBcUI7Z0JBQy9CLGsyQkFBdUM7YUFDeEM7Ozs7O3VCQU9FLGVBQWUsU0FBQyxPQUFPLEVBQUUsRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFO3lCQUU5QyxlQUFlLFNBQUMsU0FBUyxFQUFFLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRTtxQkFHaEQsS0FBSzt3QkFFTCxLQUFLOzJCQUVMLEtBQUs7NkJBRUwsS0FBSzt3QkFFTCxLQUFLO2tDQVlMLEtBQUs7cUJBYUwsV0FBVyxTQUFDLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQWZ0ZXJDb250ZW50SW5pdCwgSW5wdXQsIENvbnRlbnRDaGlsZHJlbiwgUXVlcnlMaXN0LCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGFiUGFuZSB9IGZyb20gJy4uL3RhYnMvdGFiLXBhbmUuY29tcG9uZW50JztcbmltcG9ydCB7IFRhYkJhclRhYiB9IGZyb20gJy4vdGFiLWJhci10YWIuY29tcG9uZW50JztcblxuZXhwb3J0IHR5cGUgVGFiQmFyUG9zaXRpb25UeXBlID0gJ3RvcCcgfCAnYm90dG9tJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnVGFiQmFyLCBuem0tdGFiLWJhcicsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWItYmFyLmNvbXBvbmVudC5odG1sJ1xufSlcbmV4cG9ydCBjbGFzcyBUYWJCYXIgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgcHJlZml4Q2xzOiBzdHJpbmcgPSAnYW0tdGFiLWJhcic7XG5cbiAgcHJpdmF0ZSBfdGludENvbG9yOiBzdHJpbmcgPSAnIzEwOGVlOSc7XG4gIHByaXZhdGUgX3Vuc2VsZWN0ZWRUaW50Q29sb3I6IHN0cmluZyA9ICcjODg4JztcblxuICBAQ29udGVudENoaWxkcmVuKFRhYlBhbmUsIHsgZGVzY2VuZGFudHM6IHRydWUgfSlcbiAgdGFiUGFuZXM6IFF1ZXJ5TGlzdDxUYWJQYW5lPjtcbiAgQENvbnRlbnRDaGlsZHJlbihUYWJCYXJUYWIsIHsgZGVzY2VuZGFudHM6IHRydWUgfSlcbiAgdGFiQmFyVGFiczogUXVlcnlMaXN0PFRhYkJhclRhYj47XG5cbiAgQElucHV0KClcbiAgaGlkZGVuOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpXG4gIGFjdGl2ZVRhYjogbnVtYmVyID0gMDtcbiAgQElucHV0KClcbiAgYmFyVGludENvbG9yOiBzdHJpbmcgPSAnd2hpdGUnO1xuICBASW5wdXQoKVxuICB0YWJCYXJQb3NpdGlvbjogVGFiQmFyUG9zaXRpb25UeXBlID0gJ2JvdHRvbSc7XG4gIEBJbnB1dCgpXG4gIGdldCB0aW50Q29sb3IoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5fdGludENvbG9yO1xuICB9XG4gIHNldCB0aW50Q29sb3IoY29sb3I6IHN0cmluZykge1xuICAgIHRoaXMuX3RpbnRDb2xvciA9IGNvbG9yO1xuICAgIGlmICh0aGlzLnRhYkJhclRhYnMgJiYgdGhpcy50YWJCYXJUYWJzLmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMudGFiQmFyVGFicy5mb3JFYWNoKCh0YWJCYXJUYWI6IFRhYkJhclRhYikgPT4ge1xuICAgICAgICB0YWJCYXJUYWIudGludENvbG9yID0gdGhpcy5fdGludENvbG9yO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG4gIEBJbnB1dCgpXG4gIGdldCB1bnNlbGVjdGVkVGludENvbG9yKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX3Vuc2VsZWN0ZWRUaW50Q29sb3I7XG4gIH1cbiAgc2V0IHVuc2VsZWN0ZWRUaW50Q29sb3IoY29sb3I6IHN0cmluZykge1xuICAgIHRoaXMuX3Vuc2VsZWN0ZWRUaW50Q29sb3IgPSBjb2xvcjtcbiAgICBpZiAodGhpcy50YWJCYXJUYWJzICYmIHRoaXMudGFiQmFyVGFicy5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLnRhYkJhclRhYnMuZm9yRWFjaCgodGFiQmFyVGFiOiBUYWJCYXJUYWIpID0+IHtcbiAgICAgICAgdGFiQmFyVGFiLnVuc2VsZWN0ZWRUaW50Q29sb3IgPSB0aGlzLl91bnNlbGVjdGVkVGludENvbG9yO1xuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hbS10YWItYmFyJylcbiAgdGFiQmFyOiBib29sZWFuID0gdHJ1ZTtcblxuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgc2VsZWN0VGFiUGFuZShpbmRleDogbnVtYmVyKSB7XG4gICAgdGhpcy50YWJQYW5lcy5mb3JFYWNoKCh0YWJQYW5lOiBUYWJQYW5lLCBpbmRleEtleTogbnVtYmVyKSA9PiB7XG4gICAgICBpZiAoaW5kZXggPCBpbmRleEtleSkge1xuICAgICAgICB0YWJQYW5lLnBvc2l0aW9uID0gJ3JpZ2h0LXdpdGhvdXQtYW5pbWF0aW9uJztcbiAgICAgIH0gZWxzZSBpZiAoaW5kZXggPiBpbmRleEtleSkge1xuICAgICAgICB0YWJQYW5lLnBvc2l0aW9uID0gJ2xlZnQtd2l0aG91dC1hbmltYXRpb24nO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGFiUGFuZS5wb3NpdGlvbiA9ICdjZW50ZXItd2l0aG91dC1hbmltYXRpb24nO1xuICAgICAgfVxuICAgICAgaWYgKGluZGV4ICE9PSBpbmRleEtleSkge1xuICAgICAgICB0YWJQYW5lLmFjdGl2ZSA9IGZhbHNlO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGFiUGFuZS5hY3RpdmUgPSB0cnVlO1xuICAgICAgfVxuICAgIH0pO1xuICAgIGlmICh0aGlzLnRhYkJhclRhYnMgJiYgdGhpcy50YWJCYXJUYWJzLmxlbmd0aCA+IDApIHtcbiAgICAgIHRoaXMudGFiQmFyVGFicy5mb3JFYWNoKCh0YWJCYXJUYWI6IFRhYkJhclRhYikgPT4ge1xuICAgICAgICB0YWJCYXJUYWIuc2VsZWN0ZWQgPSBmYWxzZTtcbiAgICAgIH0pO1xuICAgICAgdGhpcy50YWJCYXJUYWJzLnRvQXJyYXkoKVtpbmRleF0uc2VsZWN0ZWQgPSB0cnVlO1xuICAgICAgdGhpcy50YWJCYXJUYWJzLnRvQXJyYXkoKVtpbmRleF0ub25QcmVzcy5lbWl0KHtcbiAgICAgICAgdGl0bGU6IHRoaXMudGFiQmFyVGFicy50b0FycmF5KClbaW5kZXhdLnRpdGxlLFxuICAgICAgICBrZXk6IHRoaXMudGFiQmFyVGFicy50b0FycmF5KClbaW5kZXhdLmtleVxuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIHRoaXMuc2VsZWN0VGFiUGFuZSh0aGlzLmFjdGl2ZVRhYik7XG4gICAgdGhpcy50YWJQYW5lcy5mb3JFYWNoKCh0YWJQYW5lOiBUYWJQYW5lKSA9PiB7XG4gICAgICB0YWJQYW5lLnRpbnRDb2xvciA9IHRoaXMudGludENvbG9yO1xuICAgICAgdGFiUGFuZS51bnNlbGVjdGVkVGludENvbG9yID0gdGhpcy51bnNlbGVjdGVkVGludENvbG9yO1xuICAgIH0pO1xuICB9XG59XG4iXX0=