purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 09:23:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added ability to add custom classes to the navigation items using the "classes" property

Browse Source 
Fixed: Item function and External URL's are missing from horizontal navigation
Fixed: Horizontal navigation active item does not highlight correctly
This commit is contained in:
Sercan Yemen 2018-07-01 12:20:33 +03:00
parent 388b724e90
commit f35c1add1c
6 changed files with 66 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/@fuse/components/navigation/horizontal/collapsable/collapsable.component.html
View File

@ -1,29 +1,45 @@
<ng-container *ngIf="!item.hidden">
<!-- normal collapse -->
<a class="nav-link" *ngIf="!item.url && !item.function" matRipple>
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.function"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function" (click)="item.function()" matRipple>
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
[routerLink]="[item.url]" routerLinkActive="active"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<ng-template #itemContent>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>

32
src/@fuse/components/navigation/horizontal/item/item.component.html
View File

@ -1,20 +1,38 @@
<ng-container *ngIf="!item.hidden">
<!-- item.url -->
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()"
[routerLink]="[item.url]" routerLinkActive="active"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
@ -27,4 +45,4 @@
</span>
</ng-template>
</ng-container>
</ng-container>

15
src/@fuse/components/navigation/vertical/collapsable/collapsable.component.html
View File

@ -1,12 +1,14 @@
<ng-container *ngIf="!item.hidden">
<!-- normal collapse -->
<a class="nav-link" *ngIf="!item.url && !item.function" (click)="toggleOpen($event)" matRipple>
<a class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && !item.function"
(click)="toggleOpen($event)" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function" (click)="toggleOpen($event)"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
(click)="toggleOpen($event)"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@ -14,19 +16,20 @@
</a>
<!-- item.externalUrl -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function" (click)="toggleOpen($event)"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
(click)="toggleOpen($event)"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function"
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="toggleOpen($event);item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
@ -34,7 +37,7 @@
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && item.function"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="toggleOpen($event);item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>

2
src/@fuse/components/navigation/vertical/group/group.component.html
View File

@ -1,6 +1,6 @@
<ng-container *ngIf="!item.hidden">
<div class="group-title">
<div class="group-title" [ngClass]="item.classes">
<span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
</div>

12
src/@fuse/components/navigation/vertical/item/item.component.html
View File

@ -1,7 +1,7 @@
<ng-container *ngIf="!item.hidden">
<!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && !item.function"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@ -9,19 +9,20 @@
</a>
<!-- item.externalUrl -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && !item.function"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && !item.function"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>
<!-- item.function -->
<span class="nav-link" *ngIf="!item.url && item.function"
<span class="nav-link" [ngClass]="item.classes" *ngIf="!item.url && item.function"
(click)="item.function()" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span>
<!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && !item.externalUrl && item.function" (click)="item.function()"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
(click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}"
[target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
@ -29,7 +30,8 @@
</a>
<!-- item.externalUrl && item.function -->
<a class="nav-link" *ngIf="item.url && item.externalUrl && item.function" (click)="item.function()"
<a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && item.externalUrl && item.function"
(click)="item.function()"
[href]="item.url" [target]="item.openInNewTab ? '_blank' : '_self'" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a>

1
src/@fuse/types/fuse-navigation.ts
View File

@ -7,6 +7,7 @@ export interface FuseNavigationItem
icon?: string;
hidden?: boolean;
url?: string;
classes?: string;
exactMatch?: boolean;
externalUrl?: boolean;
openInNewTab?: boolean;