src/app/component/navigation/navigation.component.ts
| selector | stbui-navigation |
| styleUrls | ./navigation.component.scss |
| templateUrl | ./navigation.component.html |
Methods |
Inputs |
| navigationModel | |
Type : any[]
|
|
| addSubitemToNavigation |
addSubitemToNavigation()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| updateExtendBadge |
updateExtendBadge()
|
|
Returns :
void
|
import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Subscription } from 'rxjs';
// import { NavigationService } from './navigation.service';
@Component({
selector: 'stbui-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit, OnDestroy {
@Input() navigationModel: any[];
// navigationModelChangeSubscription: Subscription;
// constructor(private service: NavigationService) {
// this.navigationModelChangeSubscription = this.service.onNavigationModelChange.subscribe(
// navigation => {
// this.navigationModel = navigation;
// }
// );
// }
ngOnInit() {
// this.addSubitemToNavigation()
}
ngOnDestroy() {
// this.navigationModelChangeSubscription.unsubscribe();
}
updateExtendBadge() {
// const extendNavItem = this.service.getNavigationItem('extend');
// extendNavItem.badge.title = 6;
}
addSubitemToNavigation() {
// const newNavItem = {
// id: 'sub-item',
// title: '动态添加菜单',
// type: 'item',
// url: '/apps/navigation'
// };
// this.service.addNavigationItem('extend', newNavItem);
}
}
<div class="navigation-container">
<div class="navigation-scrollbar-container">
<perfect-scrollbar>
<ng-container *ngFor="let navigation of navigationModel">
<stbui-nav-collapse *ngIf="navigation.type == 'collapse'" [item]="navigation"></stbui-nav-collapse>
<stbui-nav-item *ngIf="navigation.type=='item'" [item]="navigation"></stbui-nav-item>
</ng-container>
</perfect-scrollbar>
</div>
<div class="navigation-footer">
<a matRipple href="https://github.com/stbui/angular-material-app/issues" target="blank">
<mat-icon>help</mat-icon>
帮助与支持
</a>
</div>
</div>
./navigation.component.scss
:host {
display: block;
height: calc(100% - 64px);
background-color: #3c4252;
color: rgba(255, 255, 255, 0.87);
}
.navigation-container,
.navigation-scrollbar-container {
flex-direction: column;
box-sizing: border-box;
display: flex;
height: 100%;
}
.navigation-footer {
flex-direction: row;
box-sizing: border-box;
display: flex;
border-top: 1px solid rgba(0, 0, 0, 0.1);
> a {
display: flex;
align-items: center;
flex: 1 1 100%;
box-sizing: border-box;
max-width: 100%;
background-color: rgba(0, 0, 0, 0.12);
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
text-align: center;
min-width: 88px;
line-height: 36px;
padding: 0 24px;
> mat-icon {
font-size: 16px;
width: 16px;
height: 16px;
margin-right: 16px;
}
}
}