@rdkmaster/jigsaw-labs/component/tabs/tab.html

Jigsaw, the next generation component set for RDK

<div class="jigsaw-tabs">
    <div *ngIf="((_$tabPanes && _$tabPanes.length > 0) || editable ) && !_$headless" class="jigsaw-tabs-bar">
        <div class="jigsaw-tabs-nav-container">
            <div #tabsInkBar class="jigsaw-tabs-ink-bar" [ngStyle]="_$inkBarStyle"></div>
            <div #tabsNavWrap class="jigsaw-tabs-nav-wrap">
                <div #tabsNav class="jigsaw-tabs-nav" [ngStyle]="_$selectTabStyle">
                    <jigsaw-tab-label class="jigsaw-tabs-tab"
                                      *ngFor="let tab of _$tabPanes; let i = index"
                                      [key]="i"
                                      [tabItem]="tab.label"
                                      [editable]="editable"
                                      [class.jigsaw-tabs-tab-active]="_$selectedIndex === i"
                                      [class.jigsaw-tabs-tab-disabled]="tab.disabled"
                                      [class.jigsaw-tabs-tab-hidden]="tab.hidden"
                                      (click)="_$tabClick(i)"
                                      (remove)="_$handleRemove($event)"
                                      (change)="titleChange.emit($event)">
                    </jigsaw-tab-label>
                    <span class="fa fa-plus-square-o jigsaw-tabs-add-bar" *ngIf="editable"
                          (click)="_$handleAdd()"></span>
                </div>
            </div>
            <div class="jigsaw-tabs-overflow-button" *ngIf="_$showOverflowButton"
                 (mouseenter)="_$popupTabList(tabsList,$event,overflowButton)"
                 (mouseleave)="_$menuAreaLeave(false)" #overflowButton>
                <span class="fa  fa-angle-double-right">
                </span>
            </div>
        </div>
    </div>
    <div class="jigsaw-tabs-content" [style.height]="_$contentHeight">
        <jigsaw-tab-content
            *ngFor="let tab of _$tabPanes; let i = index;"
            [key]="i"
            [tabItem]="tab.content"
            [isActive]="selectedIndex === i"
            [lazy]="tab.lazy"
            [initData]="tab.initData"
            [ngStyle]="{transform: 'translate3d('+(i-_$selectedIndex)*100+'%, 0px, 0px)', transition: enableAnimation ?  'transform 0.5s' : ''}">
        </jigsaw-tab-content>
    </div>
</div>

<ng-template #tabsList>
    <j-list class="jigsaw-tabs-list"
            (mouseenter)="_$clearPopupTimeout()"
            (mouseleave)="_$menuAreaLeave(false)"
            [perfectScrollbar]="{suppressScrollX: true, wheelSpeed: 0.5, wheelPropagation: true, minScrollbarLength: 20}">
        <jigsaw-list-option *ngFor="let tab of _$tabPanes; let i = index;" [value]="tab" (click)="_$listOptionClick(i)"
                            [disabled]="tab.disabled" [class.jigsaw-list-option-hidden]="tab.hidden">
            <div [class.jigsaw-list-option-selected]="_$selectedIndex === i">
                <span class="fa fa-check" *ngIf="_$selectedIndex === i"></span>
                <span style="display: inline-block" [innerHTML]="_$tabList[i]"></span>
            </div>
        </jigsaw-list-option>
    </j-list>
</ng-template>