80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
/**
|
|
* The main component that renders single TabComponent
|
|
* instances.
|
|
*/
|
|
|
|
import {
|
|
Component,
|
|
ContentChildren,
|
|
QueryList,
|
|
AfterContentInit, Output, EventEmitter,
|
|
} from '@angular/core';
|
|
|
|
import { TabComponent } from './tab.component';
|
|
|
|
@Component({
|
|
selector: 'my-tabs',
|
|
template: `
|
|
<ul uk-tab class="uk-tab main-tabs uk-margin-remove uk-child-width-expand" uk-switcher="connect: .main-tabs-content" uk-height-match="target: .tab-header">
|
|
<!-- + (tab.active ? ' uk-active' : '')-->
|
|
<li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active" [class]="'uk-padding-remove '+(tab.statistics ? ' statistics ' : '')">
|
|
<a class="uk-width-1-1 uk-height-1-1">
|
|
<div class="tab-header">{{tab.title}}</div>
|
|
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
|
|
<div *ngIf="tab.statistics" class="number">
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
|
|
<path d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="uk-switcher main-tabs-content">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
|
|
<!-- <ul class="nav nav-tabs">-->
|
|
<!-- <li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">-->
|
|
<!-- <a href="#">{{tab.title}}</a>-->
|
|
<!-- </li>-->
|
|
<!-- </ul>-->
|
|
<!-- <ng-content></ng-content>-->
|
|
`//,
|
|
// styles: [
|
|
// `
|
|
// .tab-close {
|
|
// color: gray;
|
|
// text-align: right;
|
|
// cursor: pointer;
|
|
// }
|
|
// `
|
|
// ]
|
|
})
|
|
export class TabsComponent implements AfterContentInit {
|
|
|
|
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
|
|
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
|
|
|
|
// contentChildren are set
|
|
ngAfterContentInit() {
|
|
// get all active tabs
|
|
let activeTabs = this.tabs.filter((tab)=>tab.active);
|
|
|
|
// if there is no active tab set, activate the first
|
|
if(activeTabs.length === 0) {
|
|
this.selectTab(this.tabs.first);
|
|
}
|
|
}
|
|
|
|
selectTab(tab: TabComponent){
|
|
// deactivate all tabs
|
|
this.tabs.toArray().forEach(tab => tab.active = false);
|
|
|
|
// activate the tab the user has clicked on.
|
|
tab.active = true;
|
|
this.selectedActiveTab.emit(tab.tabId);
|
|
|
|
}
|
|
}
|