angular-tabs-component
Version:
A full featured tab component for Angular (2 and above, including 4).
1 lines • 3.21 kB
JSON
[{"__symbolic":"module","version":3,"metadata":{"TabsContainer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"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 "]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"currentTabChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"addTab":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"isDisabled":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TabsContainer":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"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 "]}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"currentTabChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"addTab":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"isDisabled":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}]}}}}]