purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 08:43:33 +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
[routerLink]="[item.url]" routerLinkActive="active">
<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>

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

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

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

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

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

@ -14,7 +14,7 @@
.nav-item {
.nav-link {
text-decoration: none!important;
text-decoration: none !important;
display: flex;
align-items: center;
height: 48px;
@ -25,11 +25,22 @@
user-select: none;
color: currentColor;
> span {
> .nav-link-title {
flex: 1;
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 {
background-color: map-get($background, hover);
}
@ -48,6 +59,11 @@
&, .nav-link-icon {
color: mat-color($accent, default-contrast);
}
.nav-link-badge {
background: #FFFFFF !important;
color: rgba(0, 0, 0, 0.87) !important;
}
}
.nav-link-icon {