SmartComponent Library NG
  1. Components
  2. SmartMdiComponent

File

src/ui/mdi/smart-mdi.component.ts

Description

A Component used for MDI-style navigation of SCL apps.

Implements

AfterViewInit OnInit

Example

Metadata

selector smart-mdi
styleUrls ./smart-mdi.component.css
templateUrl ./smart-mdi.component.html
viewProviders TabParentService

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(router: Router, location: Location, serviceAdapter: SmartServiceAdapter, registry: SmartMdiRegistryService, smartConfig: SmartConfig, viewManager: SmartViewManagerService, locationStrategy: LocationStrategy, changeDetector: ChangeDetectorRef, windowTitle: SmartWindowTitleService)
Parameters :
Name Type Optional
router Router No
location Location No
serviceAdapter SmartServiceAdapter No
registry SmartMdiRegistryService No
smartConfig SmartConfig No
viewManager SmartViewManagerService No
locationStrategy LocationStrategy No
changeDetector ChangeDetectorRef No
windowTitle SmartWindowTitleService No

Inputs

disableKeyboardControls
Type : boolean

If set to false, will disable keyboard controls for the MDI interface.

Outputs

tabClosed
Type : EventEmitter<SmartTab>

Fires when a SmartTab is closed.
tabOpened
Type : EventEmitter<SmartTab>

Fires when a SmartTab is opened.

Methods

closeAll
closeAll()

Closes all opened tabs

Returns : void
closeTab
closeTab(tab: SmartTab)

Closes and discards the given SmartTab.

Parameters :
Name Type Optional
tab SmartTab No
Returns : void
showForm
showForm(formName: string, paramMap: any, sameTab, routeParams: any)

Shows the given form, using the given parameter map. If a tab is already showing the given form, that tab will be selected instead of a new one being opened.

Parameters :
Name Type Optional Default value
formName string No
paramMap any No {}
sameTab No false
routeParams any No {}
Returns : void
switchTab
switchTab(tab: SmartTab)

Switches to the given SmartTab.

Parameters :
Name Type Optional
tab SmartTab No
Returns : void
tabSelected
tabSelected(event: SelectEvent)

Called by the TabStripComponent when a tab is selected.

Parameters :
Name Type Optional
event SelectEvent No
Returns : void

Properties

activeTabs
Type : SmartTab[]
Default value : []

The currently opened tabs.
authenticated
Type : boolean
breadcrumbNavigation
Default value : false

Indicates whether tabs should display a breadcrumb trail.
currentTab
Type : SmartTab

The currently selected SmartTab.
mdiInterface
Default value : false
tabStrip
Type : TabStripComponent
Decorators :
@ViewChild(TabStripComponent)

The underlying TabStripComponent.

 
<kendo-tabstrip keepTabContent="true" *ngIf="authenticated && activeTabs.length > 0" (tabSelect)="tabSelected($event)">
    <kendo-tabstrip-tab [selected]="tab.selected" *ngFor="let tab of activeTabs">
        <ng-template kendoTabTitle>
            <span [ngClass]="{ disabled: tab.inUpdateMode}" *ngIf="tab.canGoBack && !!tab.title" (click)="tab.navigateBack()">&larr;&nbsp;&nbsp;</span>
            <span>{{tab.title}}</span>
            <span (click)="closeTab(tab)">&nbsp;&nbsp;&times;</span>
        </ng-template>
        <ng-template kendoTabContent>
            <smart-tab [tab]="tab" [breadcrumbNavigation]="breadcrumbNavigation"></smart-tab>
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>
<router-outlet *ngIf="mdiInterface" name="smart-mdi-tab"></router-outlet>

./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 ""