src/lib/kiewit-tabstrip/kiewit-tabstrip.component.ts
| moduleId | module.id |
| selector | kiewit-tabstrip |
| styleUrls | kiewit-tabstrip.component.scss |
| templateUrl | ./kiewit-tabstrip.component.html |
Properties |
Methods |
Inputs |
Outputs |
config
|
|
kcsTabStripClick
|
$event type: EventEmitter<any>
|
| kiewitTabStripClicked | ||||||||
kiewitTabStripClicked(tabData: )
|
||||||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| _sliderTabToAnimate |
_sliderTabToAnimate:
|
Type : ElementRef
|
Decorators : ViewChild
|
| _ul |
_ul:
|
Type : ElementRef
|
Decorators : ViewChild
|
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>
In HTML File