purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-08 19:45:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(fuse/navigation) Added "tooltip" property to show tooltips on navigation items using MatTooltip

Browse Source
This commit is contained in:
sercan 2021-06-20 21:28:47 +03:00
parent 47d9ddb08c
commit f4d737d3a3
6 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/@fuse/components/navigation/horizontal/components/basic/basic.component.html
View File

@ -11,7 +11,8 @@
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions"> [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
@ -20,7 +21,8 @@
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
*ngIf="item.link && item.externalLink && !item.function && !item.disabled" *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'"> [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
@ -29,6 +31,7 @@
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
*ngIf="!item.link && item.function && !item.disabled" *ngIf="!item.link && item.function && !item.disabled"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
@ -41,6 +44,7 @@
[routerLink]="[item.link]" [routerLink]="[item.link]"
[routerLinkActive]="'fuse-horizontal-navigation-item-active'" [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
@ -51,6 +55,7 @@
*ngIf="item.link && item.externalLink && item.function && !item.disabled" *ngIf="item.link && item.externalLink && item.function && !item.disabled"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''"
(click)="item.function(item)" (click)="item.function(item)"
mat-menu-item> mat-menu-item>
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
@ -60,7 +65,8 @@
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
*ngIf="!item.link && !item.function && !item.disabled" *ngIf="!item.link && !item.function && !item.disabled"
[ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"> [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>

3
src/@fuse/components/navigation/horizontal/components/branch/branch.component.html
View File

@ -74,7 +74,8 @@
<div <div
class="fuse-horizontal-navigation-item" class="fuse-horizontal-navigation-item"
[ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled, [ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
'fuse-horizontal-navigation-item-active-forced': item.active}"> 'fuse-horizontal-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''">
<!-- Icon --> <!-- Icon -->
<mat-icon <mat-icon

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

@ -15,6 +15,7 @@ export interface FuseNavigationItem
hidden?: (item: FuseNavigationItem) => boolean; hidden?: (item: FuseNavigationItem) => boolean;
active?: boolean; active?: boolean;
disabled?: boolean; disabled?: boolean;
tooltip?: string;
link?: string; link?: string;
externalLink?: boolean; externalLink?: boolean;
target?: target?:

3
src/@fuse/components/navigation/vertical/components/aside/aside.component.html
View File

@ -7,7 +7,8 @@
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-active': active, [ngClass]="{'fuse-vertical-navigation-item-active': active,
'fuse-vertical-navigation-item-disabled': item.disabled, 'fuse-vertical-navigation-item-disabled': item.disabled,
'fuse-vertical-navigation-item-active-forced': item.active}"> 'fuse-vertical-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''">
<!-- Icon --> <!-- Icon -->
<mat-icon <mat-icon

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

@ -11,7 +11,8 @@
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[routerLink]="[item.link]" [routerLink]="[item.link]"
[routerLinkActive]="'fuse-vertical-navigation-item-active'" [routerLinkActive]="'fuse-vertical-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions"> [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
@ -20,7 +21,8 @@
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
*ngIf="item.link && item.externalLink && !item.function && !item.disabled" *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'"> [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
@ -29,6 +31,7 @@
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
*ngIf="!item.link && item.function && !item.disabled" *ngIf="!item.link && item.function && !item.disabled"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}" [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
@ -41,6 +44,7 @@
[routerLink]="[item.link]" [routerLink]="[item.link]"
[routerLinkActive]="'fuse-vertical-navigation-item-active'" [routerLinkActive]="'fuse-vertical-navigation-item-active'"
[routerLinkActiveOptions]="isActiveMatchOptions" [routerLinkActiveOptions]="isActiveMatchOptions"
[matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
@ -51,6 +55,7 @@
*ngIf="item.link && item.externalLink && item.function && !item.disabled" *ngIf="item.link && item.externalLink && item.function && !item.disabled"
[href]="item.link" [href]="item.link"
[target]="item.target || '_self'" [target]="item.target || '_self'"
[matTooltip]="item.tooltip || ''"
(click)="item.function(item)"> (click)="item.function(item)">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</a> </a>
@ -59,14 +64,16 @@
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
*ngIf="!item.link && !item.function && !item.disabled" *ngIf="!item.link && !item.function && !item.disabled"
[ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"> [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
[matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>
<!-- Item is disabled --> <!-- Item is disabled -->
<div <div
class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled" class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
*ngIf="item.disabled"> *ngIf="item.disabled"
[matTooltip]="item.tooltip || ''">
<ng-container *ngTemplateOutlet="itemTemplate"></ng-container> <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
</div> </div>

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

@ -6,6 +6,7 @@
<div <div
class="fuse-vertical-navigation-item" class="fuse-vertical-navigation-item"
[ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}" [ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
[matTooltip]="item.tooltip || ''"
(click)="toggleCollapsable()"> (click)="toggleCollapsable()">
<!-- Icon --> <!-- Icon -->