src/app/component/navigation/nav-item/nav-item.component.ts
| encapsulation | ViewEncapsulation.None |
| selector | stbui-nav-item |
| styleUrls | ./nav-item.component.scss |
| templateUrl | ./nav-item.component.html |
Inputs |
| item | |
Type : any
|
|
import { Component, Input, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'stbui-nav-item',
templateUrl: './nav-item.component.html',
styleUrls: ['./nav-item.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class NavItemComponent {
@Input()
item: any;
}
<a class="navigation-link" *ngIf="item.url" [routerLink]="item.url" routerLinkActive="stbui-background-blue" matRipple>
<mat-icon class="navigation-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
<span class="navigation-link-title">{{item.title}}</span>
<span class="navigation-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg, 'color': item.badge.fg}">{{item.badge.title}}</span>
</a>
./nav-item.component.scss
.navigation-link {
position: relative;
display: flex;
align-items: center;
height: 48px;
text-decoration: none;
padding: 0 24px;
overflow: hidden;
cursor: pointer;
user-select: none;
color: currentColor;
&.active {
background: #2196f3;
color: #fff;
}
&-icon {
font-size: 16px;
width: 16px;
height: 16px;
margin-right: 16px;
}
&-title {
flex: 1;
white-space: nowrap;
}
&-badge {
display: flex;
align-items: center;
min-width: 20px;
height: 20px;
padding: 0 7px;
font-size: 11px;
font-weight: 500;
border-radius: 20px;
margin-left: 8px;
box-sizing: border-box;
}
}
.navigation-children {
.navigation-link {
padding-left: 56px;
}
}