md2/tabs/tabs.html

Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Chips(Tags), Collapse, Colorpicker, Data Table, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.

<div class="md2-tabs-header-wrapper"><div role="button" class="md2-prev-button" [class.disabled]="!canPageBack()" *ngIf="_shouldPaginate" (click)="previousPage()"><em class="prev-icon">Prev</em></div><div role="button" class="md2-next-button" [class.disabled]="!canPageForward()" *ngIf="_shouldPaginate" (click)="nextPage()"><em class="next-icon">Next</em></div><div class="md2-tabs-canvas" [class.md2-paginated]="_shouldPaginate" role="tablist" tabindex="0" (keydown.arrowRight)="focusNextTab()" (keydown.arrowLeft)="focusPreviousTab()" (keydown.enter)="selectedIndex = focusIndex" (mousewheel)="scroll($event)"><div class="md2-tabs-header" [style.marginLeft.px]="-_offsetLeft"><div class="md2-tab-label" role="tab" *ngFor="let tab of tabs; let i = index" [class.focus]="focusIndex === i" [class.active]="selectedIndex === i" [class.disabled]="tab.disabled" (click)="focusIndex = selectedIndex = i"><span [md2Transclude]="tab.labelRef">{{tab.label}}</span></div><div class="md2-tab-ink-bar" [style.left]="_inkBarLeft" [style.width]="_inkBarWidth"></div></div></div></div><div class="md2-tabs-body-wrapper"><ng-content></ng-content></div>