File
Implements
Metadata
moduleId |
module.id |
selector |
kiewit-tabstrip |
styleUrls |
kiewit-tabstrip.component.scss |
templateUrl |
./kiewit-tabstrip.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Outputs
kcsTabStripClick
|
$event type: EventEmitter<any>
|
|
Methods
kiewitTabStripClicked
|
kiewitTabStripClicked(tabData: )
|
|
Parameters :
Name |
Type |
Optional |
Description |
tabData |
|
|
|
|
import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'kiewit-tabstrip',
templateUrl: './kiewit-tabstrip.component.html',
styleUrls: ['./kiewit-tabstrip.component.scss']
})
export class KiewitTabStripComponent implements OnInit {
@ViewChild('slidertab') _sliderTabToAnimate: ElementRef;
@ViewChild('ul') _ul: ElementRef;
@Input() config = {
data: []
};
@Output() kcsTabStripClick: EventEmitter<any> = new EventEmitter();
ngOnInit() {
this._sliderTabToAnimate.nativeElement.style.marginLeft = this.config.data[0].SliderLeftMargin + 'px';
this._sliderTabToAnimate.nativeElement.style.width = this.config.data[0].SliderWidth + 'px';
}
kiewitTabStripClicked(tabData) {
this._sliderTabToAnimate.nativeElement.style.marginLeft = tabData.SliderLeftMargin + 'px';
this._sliderTabToAnimate.nativeElement.style.width = tabData.SliderWidth + 'px';
this.kcsTabStripClick.emit(tabData);
}
}
<kendo-tabstrip style="height: 40px; display: table-cell; vertical-align: middle; text-align: center;">
<div #ul *ngIf='config.data && config.data.length' >
<div *ngFor="let tab of config.data; let id = index">
<kendo-tabstrip-tab #kendotab [selected]=tab.Selected>
<ng-template kendoTabTitle>
<span class="kiewitTabTitle" (click)="kiewitTabStripClicked(tab)"> {{tab.Title}} </span>
</ng-template>
</kendo-tabstrip-tab>
</div>
</div>
</kendo-tabstrip>
<div #slidertab style="max-width:264px; height: 3px; position:absolute; background: #FFD200; transition: 1s; margin-top: -10px"></div>
Implementation
In Type Script File
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'kiewit-tabstrip',
templateUrl: './kiewit-tabstrip.component.html',
styleUrls: ['./kiewit-tabstrip.component.scss']
})
export class KiewitTabStripComponent implements OnInit {
public data: any[] = [{
'Id': 1,
'Title': 'Opportunities',
'SliderWidth': 180,
'SliderLeftMargin': 0,
'Selected': true
},
{
'Id': 2,
'Title': 'Pending/New Work "Plugs"',
'SliderWidth': 180,
'SliderLeftMargin': 180 * 1,
'Selected': false
},
{
'Id': 3,
'Title': 'ORS Project tags & Financial Plans',
'SliderWidth': 180,
'SliderLeftMargin': 180 * 2,
'Selected': false
}];
public tabstripConfig: any = {
'data': this.data
};
kiewitTabStripClicked(tabData) {
//alert(tabData.Title);
}
}
In HTML File
<kiewit-tabstrip [config]="tabstripConfig" (kcsTabStripClick)="kiewitTabStripClicked($event)">
</kiewit-tabstrip>
Legend
Html element with directive