src/ui/breadcrumbs/smart-mdi-breacrumb-navigation.component.ts
A component used to show the navigation trail within a MDI tab.
OnInit
DoCheck
OnDestroy
IBreadCrumbComponent
| encapsulation | ViewEncapsulation.None |
| selector | smart-mdi-breadcrumb-navigation |
| styleUrls | ./smart-mdi-breadcrumb-navigation.component.css |
| templateUrl | ./smart-mdi-breadcrumb-navigation.component.html |
Properties |
|
Methods |
Inputs |
Accessors |
constructor(serviceAdapter: SmartServiceAdapter, viewManager: SmartViewManagerService, breadcrumbRegistry: SmartBreadcrumbRegistryService, router: Router, smartConfig: SmartConfig)
|
||||||||||||||||||
|
Parameters :
|
| disabled |
Type : boolean
|
|
Determines whether the breadcrumb component is disabled |
| mdiTab |
|
The tab that the MDI Breadcrumb instance is loaded on. |
| navigate | ||||||
navigate(breadcrumb: MDIBreadCrumb)
|
||||||
|
Navigates the SmartTab to the route represented by the given breadcrumb. param breadcrumb
Parameters :
Returns :
any
|
| breadcrumbs |
Type : MDIBreadCrumb[]
|
Default value : []
|
|
The breadcrumbs that are currently being displayed. |
| Public smartConfig |
Type : SmartConfig
|
| mdiTab | ||||
getmdiTab()
|
||||
|
Returns :
SmartTab
|
||||
setmdiTab(value)
|
||||
|
The tab that the MDI Breadcrumb instance is loaded on.
Parameters :
Returns :
void
|
| inUpdateMode |
getinUpdateMode()
|
|
Returns :
boolean
|
<ol [ngClass]="{ breadcrumb: true, 'smart-breadcrumb-navigation': true, disabled: disabled || inUpdateMode }" *ngIf="smartConfig.showSingleBreadcrumb !== false || breadcrumbs.length > 1">
<li class="smart-breadcrumb breadcrumb-item" *ngFor="let item of breadcrumbs let i=index">
<a [ngClass]="{ 'smart-breadcrumb-label': true, disabled: disabled || inUpdateMode }" (click)="navigate(item)">{{item.label}}</a>
</li>
</ol>
./smart-mdi-breadcrumb-navigation.component.css
.smart-breadcrumb {
cursor: pointer;
}
a.disabled {
pointer-events: none !important;
color: lightblue !important;
cursor: default !important;
}
a.disabled:hover {
text-decoration: none !important;
}