feature: add tab page component
This commit is contained in:
Sagi
parent
1aea7f3057
commit
c44ddb6159
|
|
@ -1,97 +0,0 @@
|
|||
<div #tabHeader class="farris-tabs-header"
|
||||
[class.farris-tabs-inHead]="hasInHeadCl()"
|
||||
[class.farris-tabs-inContent]="!hasInHeadCl()"
|
||||
[class.farris-tabs-nav-fill]="fill||tabType=='fill'"
|
||||
[class.farris-tabs-nav-pills]="tabType=='pills'"
|
||||
>
|
||||
<div class="farris-tabs-title scroll-tabs"
|
||||
[ngStyle]="{'width': hasInHeadCl() ? (titleWidth?titleWidth + '%':null) : null}">
|
||||
<button type="button" (disabled)="disableLeft" class="btn sc-nav-btn px-1 sc-nav-lr"
|
||||
[ngClass]="{'d-none':hideButtons}" #leftNav>
|
||||
</button>
|
||||
<div class="spacer f-utils-fill" #tabParent
|
||||
[ngClass]="{'spacer-sides':!hideButtons&& hideDropDown,'spacer-sides-dropdown':!hideButtons&&!hideDropDown}"
|
||||
style="width:100%;">
|
||||
<ul class="nav farris-nav-tabs flex-nowrap" [class.nav-fill]="fill||tabType=='fill'"
|
||||
[class.flex-row]="position==='top'||position==='bottom'"
|
||||
[class.flex-column]="position==='left'||position==='right'" [class.nav-pills]="tabType=='pills'" #tabContainer>
|
||||
<li class="nav-item" *ngFor="let tab of tabs;index as tabIndex"
|
||||
[ngClass]="{'d-none': tab._show !== true, 'f-state-active': tab.id === activeId, 'f-state-disabled': tab.disabled === true}"
|
||||
[ngStyle]="{'width':tab.tabWidth+'px'}">
|
||||
<a class="nav-link tabs-text-truncate" #anchor [class.active]="tab.id === activeId"
|
||||
[class.disabled]="tab.disabled" (click)="_cpSelectTabByIndex($event,tab.id)">
|
||||
<span class="st-tab-text" [class.farris-title-auto]="autoTitleWidth"
|
||||
[ngClass]="tab.titleCustomCls" [tabTransclude]="tab.headingRef"
|
||||
*ngIf="tab.headingRef"></span>
|
||||
<span class="st-tab-text" [ngbTooltip]="tab.title" [referElement]="tabContainer"
|
||||
[disableTooltip]="!tab.titleOverflow" [class.farris-title-auto]="autoTitleWidth"
|
||||
[class.farris-title-text-custom]="tab.titleOverflow"
|
||||
*ngIf="!tab.headingRef">{{tab.title}}</span>
|
||||
<span class="st-drop-close" *ngIf="tab.removeable">
|
||||
<i class="f-icon f-icon-close"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group sc-nav-btn" ngbDropdown (openChange)="openChange($event)" >
|
||||
<button type="button" (disabled)="disableRight" class="btn sc-nav-rg" [ngClass]="{'d-none':hideButtons}"
|
||||
#rightNav></button>
|
||||
<button #dropDownButton class="btn dropdown-toggle-split " ngbDropdownToggle
|
||||
[ngClass]="{'d-none':hideDropDown}">
|
||||
</button>
|
||||
<div class="dropdown-menu" [class.tabs-pt28]="searchBoxVisible" ngbDropdownMenu #ddm="DropdownMenu">
|
||||
<div (click)="stopBubble($event)" class='pb-1 tabs-li-absolute' *ngIf="searchBoxVisible">
|
||||
<input type="text" class="form-control k-textbox" [(ngModel)]="searchTabText"
|
||||
(keyup)="searchTab($event)" />
|
||||
<span class="f-icon f-icon-page-title-query tabs-icon-search"></span>
|
||||
</div>
|
||||
<ul class="tab-dropdown-menu--items" [ngStyle]="{'width':menuItemsWidth}">
|
||||
<li class="dropdown-item text-truncate px-2" *ngFor="let tab of dropdownTabs;index as tabIndex"
|
||||
[ngClass]="{'disabled': tab.disabled, 'active': tab.id === activeId, 'd-none': tab._show !==true}"
|
||||
(click)="_cpSelectTabByIndex($event,tab.id, ddm)">
|
||||
<!-- <span class="float-right st-drop-close">
|
||||
<i class="material-icons align-middle">close</i>
|
||||
</span> -->
|
||||
<a class="dropdown-title">{{tab.title}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div #toolbarContainer class="farris-tabs-toolbar" *ngIf="toolbarConf || headerExtendConf">
|
||||
<div class="farris-tabs-inline-flex" *ngIf="toolbarConf">
|
||||
<ng-template ngFor let-btn [ngForOf]="toolbarConf.contents" let-i="index" [ngForTrackBy]="trackByButton">
|
||||
<button [attr.id]="btn.id" [ngClass]="btn.appearance.class"
|
||||
*ngIf="getToolbarState(btn.id, btnVisible) | async"
|
||||
[disabled]="getToolbarState(btn.id, btnStates) | async"
|
||||
(click)="clickHandler(btn)">{{btn.title}}</button>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="btn-group sc-nav-btn" ngbDropdown [hidden]="toolbarDpHidden">
|
||||
<button class="btn btn-link morebtn" ngbDropdownToggle>{{'tabs.more' | locale}}</button>
|
||||
<ul class="dropdown-menu" ngbDropdownMenu *ngIf="inMoreButtonContents.length">
|
||||
<ng-template ngFor let-content [ngForOf]="inMoreButtonContents" let-i="index">
|
||||
<li class="dropdown-item text-truncate px-2"
|
||||
*ngIf="getToolbarState(content.id, btnVisible) | async">
|
||||
<button style="width:100%;" [attr.id]="content.id" class="btn btn-link text-left"
|
||||
[class.disabled]="getToolbarState(content.id, btnStates) | async"
|
||||
(click)="clickHandler(content)">{{content.title}}</button>
|
||||
</li>
|
||||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="headerExtendConf && headerExtendConf.templateRef" class="farris-tabs-header-extend"
|
||||
[class.margin-right-14]="toolbarConf && toolbarConf.contents.length"
|
||||
[ngClass]="headerExtendConf && headerExtendConf.extendCls">
|
||||
<template [ngTemplateOutlet]="headerExtendConf.templateRef"></template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="farris-tabs-btn-placeholder" #btnPlaceholder *ngIf="toolbarConf">
|
||||
<ng-container *ngFor="let btn of toolbarConf.contents">
|
||||
<button [ngClass]="btn.appearance.class"
|
||||
*ngIf="getToolbarState(btn.id, btnVisible) | async">{{btn.title}}</button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<ng-content></ng-content>
|
||||
Loading…
Reference in New Issue