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

(Navigation) nav-link badge feature added.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-15 13:11:20 +03:00
parent dad0964563
commit 02a67630a4
4 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/core/components/navigation/nav-item/nav-item.component.html
View File

@ -1,5 +1,6 @@
<a class="nav-link" md-ripple <a class="nav-link" md-ripple
[routerLink]="[item.url]" routerLinkActive="active"> [routerLink]="[item.url]" routerLinkActive="active">
<md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon> <md-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</md-icon>
<span>{{item.title}}</span> <span class="nav-link-title">{{item.title}}</span>
<span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
</a> </a>

3
src/app/core/components/navigation/nav-item/nav-item.component.scss
View File

@ -4,7 +4,8 @@
.nav-link { .nav-link {
> span { > .nav-link-title,
> .nav-link-badge {
opacity: 0; opacity: 0;
transition: opacity 200ms ease; transition: opacity 200ms ease;
} }

21
src/app/core/components/navigation/navigation.model.ts
View File

@ -31,13 +31,23 @@ export class FuseNavigation
'title': 'Mail', 'title': 'Mail',
'type' : 'nav-item', 'type' : 'nav-item',
'icon' : 'email', 'icon' : 'email',
'url' : '/apps/mail' 'url' : '/apps/mail',
'badge': {
'title': 25,
'bg' : '#F44336',
'fg' : '#FFFFFF'
}
}, },
{ {
'title': 'Chat', 'title': 'Chat',
'type' : 'nav-item', 'type' : 'nav-item',
'icon' : 'chat', 'icon' : 'chat',
'url' : '/apps/chat' 'url' : '/apps/chat',
'badge': {
'title': 13,
'bg' : '#09d261',
'fg' : '#FFFFFF'
}
}, },
{ {
'title': 'File Manager', 'title': 'File Manager',
@ -55,7 +65,12 @@ export class FuseNavigation
'title': 'To-Do', 'title': 'To-Do',
'type' : 'nav-item', 'type' : 'nav-item',
'icon' : 'check_box', 'icon' : 'check_box',
'url' : '/apps/todo' 'url' : '/apps/todo',
'badge': {
'title': 3,
'bg' : '#FF6F00',
'fg' : '#FFFFFF'
}
}, },
{ {
'title': 'PAGES', 'title': 'PAGES',

18
src/app/core/scss/partials/_navigation.scss
View File

@ -25,11 +25,22 @@
user-select: none; user-select: none;
color: currentColor; color: currentColor;
> span { > .nav-link-title {
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
} }
.nav-link-badge {
min-width: 20px;
height: 20px;
line-height: 20px;
padding: 0 7px;
font-size: 11px;
font-weight: 500;
border-radius: 20px;
transition: opacity 0.2s ease-in-out 0.1s;
}
&:hover { &:hover {
background-color: map-get($background, hover); background-color: map-get($background, hover);
} }
@ -48,6 +59,11 @@
&, .nav-link-icon { &, .nav-link-icon {
color: mat-color($accent, default-contrast); color: mat-color($accent, default-contrast);
} }
.nav-link-badge {
background: #FFFFFF !important;
color: rgba(0, 0, 0, 0.87) !important;
}
} }
.nav-link-icon { .nav-link-icon {