SmartComponent Library NG
  1. Components
  2. SmartTabFolderComponent

File

src/ui/smart-tab-folder/smart-tab-folder.component.ts

Extends

AbstractFormChild

Implements

OnInit OnChanges OnDestroy AfterViewInit

Metadata

selector smart-tab-folder
styleUrls ./smart-tab-folder.component.css,
../mdi/smart-mdi.component.css
templateUrl ./smart-tab-folder.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor(http: SmartHttpService, serviceAdapter: SmartServiceAdapter, tabfolderService: SmartTabFolderRegistryService, injector: Injector, renderer: Renderer2, elementRef: ElementRef)
Parameters :
Name Type Optional
http SmartHttpService No
serviceAdapter SmartServiceAdapter No
tabfolderService SmartTabFolderRegistryService No
injector Injector No
renderer Renderer2 No
elementRef ElementRef No

Inputs

smart-object-name
Type : string
smart-tab-folder-pages
Type : string | TabFolderPageSettings[] | SmartTabFolderTab[]

Methods

_onTabSelect
_onTabSelect(event: SelectEvent)
Parameters :
Name Type Optional
event SelectEvent No
Returns : void
computeTabPagePadding
computeTabPagePadding(padding: number, element: HTMLElement)
Parameters :
Name Type Optional
padding number No
element HTMLElement No
Returns : any
disablePage
disablePage(tab: number | string)
Parameters :
Name Type Optional
tab number | string No
Returns : void
enablePage
enablePage(tab: number | string)
Parameters :
Name Type Optional
tab number | string No
Returns : void
Public handleLayoutChange
handleLayoutChange(newLayout: literal type)
Parameters :
Name Type Optional
newLayout literal type No
Returns : void
selectPage
selectPage(tab: number | string)
Parameters :
Name Type Optional
tab number | string No
Returns : void

Properties

_activeTab
Type : number
Default value : 0
_pages
Type : TabFolderPageSettings[]
contentPages
Type : QueryList<SmartTabFolderTab>
Decorators :
@ContentChildren(SmartTabFolderTab)
height
Type : number
notifiedLoading
Default value : false
onTabChanged
Type : EventEmitter<number>
Default value : new EventEmitter()
smartTabFolderPages
Type : QueryList<ElementRef>
Decorators :
@ViewChildren(SmartTabFolderPageComponent, {read: ElementRef})

Accessors

objectName
getobjectName()
setobjectName(objectName: string)
Parameters :
Name Type Optional
objectName string No
Returns : void
tabstrip
gettabstrip()
Returns : ElementRef
settabstrip(kendoTabStrip)
Parameters :
Name Optional
kendoTabStrip No
Returns : void
tabStripComponent
gettabStripComponent()
Returns : TabStripComponent
settabStripComponent(value)
Parameters :
Name Optional
value No
Returns : void 
<kendo-tabstrip 
    #tabstrip
    (tabSelect)="_onTabSelect($event)"
    [keepTabContent]="true">
    <kendo-tabstrip-tab
        *ngFor="let tab of pages"
        [selected]="tab.selected"
        [disabled]="tab.disabled">
            <ng-template kendoTabTitle>
                <div class="tab-title row">
                    <span *ngIf="!!tab.icon">
                        <img *ngIf="!tab.fontIcon" [src]="tab.icon">
                        <i *ngIf="tab.fontIcon" [class]="tab.fontIcon"></i>
                        &nbsp;
                    </span>
                    {{tab.label}}
                </div>
            </ng-template>
            <ng-template kendoTabContent>
                <SmartTabFolderPage *ngIf="!tab.tabContent" [layout]="tab" [selected]="tab.selected" [key]="tab.key"></SmartTabFolderPage>
                <SmartTabFolderPage *ngIf="!!tab.tabContent" [tabContent]="tab.tabContent" [selected]="tab.selected" [key]="tab.key"></SmartTabFolderPage>
            </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>

./smart-tab-folder.component.css 

::ng-deep .smart-form-row {
    margin-left: 0;
    margin-right: 0;
}

::ng-deep .row.tab-title {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

::ng-deep  ul.k-tabstrip-items {
    z-index: 999 !important;
}

../mdi/smart-mdi.component.css 

.smart-tab-header {
    cursor: pointer !important
}

 ::ng-deep span.disabled {
    color: lightgray !important;
    cursor: default !important;
}

 ::ng-deep .k-tabstrip>.k-content {
    border-color: rgba(0, 0, 0, .08) !important;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""