redoc/lib/common/components/Tabs/tabs.js

58 lines
1.0 KiB
JavaScript
Raw Normal View History

2015-10-22 20:52:03 +03:00
'use strict';
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
@Component({
selector: 'tabs'
})
@View({
template: `
<ul>
2015-11-22 23:34:40 +03:00
<li *ng-for="#tab of tabs" [ng-class]="{active: tab.active}" (click)="selectTab(tab)"
class="tab-{{tab.tabStatus}}"> {{tab.tabTitle}}
</li>
2015-10-22 20:52:03 +03:00
</ul>
<ng-content></ng-content>
`,
directives: [CORE_DIRECTIVES],
2015-11-23 22:54:20 +03:00
styleUrls: ['./lib/common/components/Tabs/tabs.css']
2015-10-22 20:52:03 +03:00
})
export class Tabs {
constructor() {
this.tabs = [];
}
selectTab(tab) {
this.tabs.forEach((tab) => {
tab.active = false;
});
tab.active = true;
}
2015-12-13 13:38:39 +03:00
addTab(tab) {
2015-10-22 20:52:03 +03:00
if (this.tabs.length === 0) {
tab.active = true;
}
this.tabs.push(tab);
}
}
@Component({
selector: 'tab',
2015-11-22 23:34:40 +03:00
inputs: ['tabTitle: tab-title', 'tabStatus: tab-status']
2015-10-22 20:52:03 +03:00
})
@View({
template: `
<div class="tab-wrap" [hidden]="!active">
<ng-content></ng-content>
</div>
2015-10-30 11:26:23 +03:00
`
2015-10-22 20:52:03 +03:00
})
export class Tab {
constructor(tabs) {
tabs.addTab(this);
}
}
Tab.parameters = [ [ Tabs ] ];