purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +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"> <ng-container *ngIf="!item.hidden">
<!-- normal collapse --> <!-- 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> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.url --> <!-- item.url -->
<a class="nav-link" *ngIf="item.url && !item.function" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLink]="[item.url]" routerLinkActive="active" [routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [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> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- 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> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
[routerLink]="[item.url]" routerLinkActive="active" (click)="item.function()"
[routerLink]="[item.url]" [routerLinkActive]="['active', 'mat-accent-bg']"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
<ng-container *ngTemplateOutlet="itemContent"></ng-container> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </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> <ng-template #itemContent>
<mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon> <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="nav-link-title" [translate]="item.translate">{{item.title}}</span> <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>

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

@ -1,20 +1,38 @@
<ng-container *ngIf="!item.hidden"> <ng-container *ngIf="!item.hidden">
<!-- item.url --> <!-- item.url -->
<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && !item.function"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [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> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>
<!-- item.function --> <!-- 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> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</span> </span>
<!-- item.url && item.function --> <!-- item.url && item.function -->
<a class="nav-link" *ngIf="item.url && item.function" (click)="item.function()" <a class="nav-link" [ngClass]="item.classes" *ngIf="item.url && !item.externalUrl && item.function"
[routerLink]="[item.url]" routerLinkActive="active" (click)="item.function()"
[routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple> [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> <ng-container *ngTemplateOutlet="itemContent"></ng-container>
</a> </a>

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

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

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

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

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

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