36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
/**
|
|
* The main component that renders single TabComponent
|
|
* instances.
|
|
*/
|
|
import {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">
|
|
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (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" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></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 {
|
|
@Input()
|
|
public customClass: string;
|
|
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
|
|
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
|
|
|
|
selectTab(tab: TabComponent){
|
|
// activate the tab the user has clicked on.
|
|
this.selectedActiveTab.emit(tab.tabId);
|
|
}
|
|
}
|