50 lines
1.7 KiB
TypeScript
50 lines
1.7 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 [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-tab main-tabs uk-margin-remove uk-child-width-expand'"
|
|
uk-tab uk-switcher="connect: .tabs-content" uk-height-match="target: .tab-header">
|
|
<li *ngFor="let tab of tabs.toArray(); let i=index"
|
|
[class]="'uk-padding-remove '+ tab.customClass + (i == 0?' uk-active':'')"
|
|
(click)="selectTab(tab)">
|
|
<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.customClass == '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]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-switcher tabs-content main-tabs-content'">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
`
|
|
})
|
|
export class TabsComponent {
|
|
|
|
@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);
|
|
}
|
|
}
|