angular-tabs-component
Version:
A full featured tab component for Angular (2 and above, including 4).
53 lines • 2.53 kB
JavaScript
import { Component, Input, EventEmitter, Output } from "@angular/core";
var TabsContainer = /** @class */ (function () {
function TabsContainer() {
this.currentTabChange = new EventEmitter();
this.ifTabSelected = false;
this.tabs = [];
}
TabsContainer.prototype.addTab = function (tab) {
this.tabs.push(tab);
};
TabsContainer.prototype.selectTab = function (tab) {
this.tabs.forEach(function (tab) {
tab.active = false;
});
tab.active = true;
this.currentTabChange.emit(tab);
};
TabsContainer.prototype.isDisabled = function () {
if (this.disabled) {
return "block";
}
else
return "none";
};
TabsContainer.prototype.ngAfterContentInit = function () {
var _this = this;
this.tabs.forEach(function (tab) {
if (tab.active) {
_this.selectTab(tab);
_this.ifTabSelected = true;
}
});
if (!this.ifTabSelected) {
this.selectTab(this.tabs[0]);
}
};
TabsContainer.decorators = [
{ type: Component, args: [{
selector: "tabs",
template: "\n <ul class=\"tabs__tab-bar\">\n <li *ngFor=\"let tab of tabs\" (click)=\"selectTab(tab)\" class=\"tabs__tab\" [ngClass]=\"{'active': tab.active == true}\">\n {{ tab.tabTitle }}\n </li>\n </ul>\n <ng-content></ng-content>\n <div class=\"overlay\" [style.display]=\"isDisabled()\"></div>\n ",
styles: ["\n *{margin:0px;padding:0px}:host{padding:10px 10px;display:flex;flex-direction:column;position:relative;min-height:calc(100vh - 20px)}.tabs__tab-bar{align-self:center;border-radius:4px;overflow:hidden;margin-bottom:-12px;z-index:1000;border:1px solid #c9c9c9}.tabs__tab{padding:4px 10px;display:inline-block;background-color:white;cursor:pointer}.tabs__tab.active{background-color:#6fbbff !important;color:white}.overlay{background:#e0e0e0;opacity:0.5;bottom:0;left:0;position:absolute;right:0;top:0;z-index:1000}\n "]
},] },
];
/** @nocollapse */
TabsContainer.ctorParameters = function () { return []; };
TabsContainer.propDecorators = {
'disabled': [{ type: Input },],
'currentTabChange': [{ type: Output },],
};
return TabsContainer;
}());
export { TabsContainer };
//# sourceMappingURL=tabs.container.js.map