angular-material-app documentation
  1. Components
  2. NavigationComponent

File

src/app/component/navigation/navigation.component.ts

Implements

OnInit OnDestroy

Metadata

selector stbui-navigation
styleUrls ./navigation.component.scss
templateUrl ./navigation.component.html

Index

Methods
Inputs

Inputs

navigationModel
Type : any[]
Defined in src/app/component/navigation/navigation.component.ts:11

Methods

addSubitemToNavigation
addSubitemToNavigation()
Defined in src/app/component/navigation/navigation.component.ts:35
Returns : void
ngOnDestroy
ngOnDestroy()
Defined in src/app/component/navigation/navigation.component.ts:26
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/component/navigation/navigation.component.ts:22
Returns : void
updateExtendBadge
updateExtendBadge()
Defined in src/app/component/navigation/navigation.component.ts:30
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);
  }
}
Copy
<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>
Copy

./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;
    }
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""