45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
/**
|
|
* The main component that renders single TabComponent
|
|
* instances.
|
|
*/
|
|
import {AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
|
|
import {TabComponent} from './tab.component';
|
|
|
|
@Component({
|
|
selector: 'my-tabs',
|
|
template: `
|
|
<ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
|
|
<!-- [class.uk-active]="selected === tab.tabId"-->
|
|
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" (click)="selectTab(tab)">
|
|
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
|
|
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
|
|
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>
|
|
<div>{{tab.title}}</div>
|
|
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="uk-switcher tabs-content">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
`
|
|
})
|
|
export class TabsComponent implements AfterContentInit {
|
|
@Input()
|
|
public customClass: string;
|
|
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
|
|
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
|
|
public selected: string;
|
|
|
|
ngAfterContentInit() {
|
|
if(this.tabs.length > 0) {
|
|
this.selected = this.tabs.get(0).tabId;
|
|
}
|
|
}
|
|
|
|
selectTab(tab: TabComponent){
|
|
this.selected = tab.tabId;
|
|
this.selectedActiveTab.emit(tab.tabId);
|
|
}
|
|
}
|