src/app/admin/header/header.component.ts
| selector | stbui-header |
| styleUrls | ./header.component.scss |
| templateUrl | ./header.component.html |
Properties |
Methods |
Inputs |
constructor(router: Router)
|
||||||
|
Defined in src/app/admin/header/header.component.ts:15
|
||||||
|
Parameters :
|
| customizer | |
Type : any
|
|
|
Defined in src/app/admin/header/header.component.ts:11
|
|
| sidenav | |
Type : any
|
|
|
Defined in src/app/admin/header/header.component.ts:12
|
|
| toggleFullscreen |
toggleFullscreen()
|
|
Defined in src/app/admin/header/header.component.ts:27
|
|
Returns :
void
|
| isFullscreen |
Type : boolean
|
Default value : false
|
|
Defined in src/app/admin/header/header.component.ts:14
|
| showLoading |
Type : boolean
|
|
Defined in src/app/admin/header/header.component.ts:15
|
import { Component, Input } from '@angular/core';
import { NavigationStart, NavigationEnd, Router } from '@angular/router';
import * as screenfull from 'screenfull';
@Component({
selector: 'stbui-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
@Input() customizer: any;
@Input() sidenav: any;
isFullscreen: boolean = false;
showLoading: boolean;
constructor(private router: Router) {
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
this.showLoading = true;
} else if (event instanceof NavigationEnd) {
this.showLoading = false;
}
});
}
toggleFullscreen() {
if (screenfull.enabled) {
screenfull.toggle();
this.isFullscreen = !this.isFullscreen;
}
}
}
<div class="main-toolbar mat-elevation-z2" fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button (click)="sidenav.opened = !sidenav.opened">
<mat-icon>menu</mat-icon>
</button>
<span fxFlex></span>
<button mat-icon-button [fxHide]="true" [fxHide.gt-sm]="false" (click)="toggleFullscreen()">
<mat-icon *ngIf="!isFullscreen">fullscreen</mat-icon>
<mat-icon *ngIf="isFullscreen">fullscreen_exit</mat-icon>
</button>
<button mat-icon-button>
<mat-icon>search</mat-icon>
</button>
<stbui-toolbar-notification></stbui-toolbar-notification>
<stbui-toolbar-user></stbui-toolbar-user>
<button mat-button class="more-btn" (click)="customizer.open()">
<mat-icon>settings</mat-icon>
</button>
</div>
<stbui-loading *ngIf="showLoading"></stbui-loading>
./header.component.scss
:host {
z-index: 4;
}
.main-toolbar {
height: 64px;
padding-left: 16px;
}
.more-btn {
height: 100%;
min-width: 70px;
}
.mat-icon-button {
margin-right: 10px;
}