src/ui/breadcrumbs/smart-breadcrumb-navigation.component.ts
A component used for displaying a breadcrumb trail of the current smart route.
OnInit
OnDestroy
IBreadCrumbComponent
| encapsulation | ViewEncapsulation.None |
| selector | smart-breadcrumb-navigation |
| styleUrls | ./smart-breadcrumb-navigation.component.css |
| templateUrl | ./smart-breadcrumb-navigation.component.html |
Properties |
|
Methods |
Inputs |
Accessors |
constructor(router: Router, viewManager: SmartViewManagerService, smartConfig: SmartConfig, breadcrumbRegistry: SmartBreadcrumbRegistryService, serviceAdapter: SmartServiceAdapter, elementRef: ElementRef, breadcrumbHelper: SmartBreadcrumbHelperService)
|
||||||||||||||||||||||||
|
Parameters :
|
| disabled |
Default value : false
|
| routerOutlet |
Type : string
|
| navigate | ||||||
navigate(breadcrumb: IBreadCrumb)
|
||||||
|
Navigates to the view associated with the given breadcrumb param breadcrumb
Parameters :
Returns :
void
|
| customHomeBreadcrumb |
Type : IBreadCrumb
|
| Public elementRef |
Type : ElementRef
|
| Public smartConfig |
Type : SmartConfig
|
| breadcrumbs |
getbreadcrumbs()
|
|
The breadcrumbs that are currently displayed
Returns :
IBreadCrumb[]
|
<ol [ngClass]="{ breadcrumb: true, 'smart-breadcrumb-navigation': true, disabled: disabled }" *ngIf="smartConfig.showSingleBreadcrumb !== false || (!routerOutlet && breadcrumbs.length > 0) || breadcrumbs.length > 1 ">
<li class="smart-breadcrumb breadcrumb-item" *ngIf="!customHomeBreadcrumb && !routerOutlet">
<a [ngClass]="{ 'smart-breadcrumb-label': true, disabled: disabled }" [routerLink]="['/', { outlets: { view: null } }]">Home</a>
</li>
<li class="smart-breadcrumb breadcrumb-item" *ngIf="!!customHomeBreadcrumb && !routerOutlet">
<a [ngClass]="{ 'smart-breadcrumb-label': true, disabled: disabled }" [routerLink]="['/', { outlets: { view: customHomeBreadcrumb.url } }]">{{customHomeBreadcrumb.label}}</a>
</li>
<li class="smart-breadcrumb breadcrumb-item" *ngFor="let item of breadcrumbs let i=index">
<a [ngClass]="{ 'smart-breadcrumb-label': true, disabled: disabled }" (click)="navigate(item)">{{item.label}}</a>
</li>
</ol>
./smart-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;
}