File
Metadata
| exportAs |
menuBar |
| selector |
re-menu-bar |
| styleUrls |
menu-bar.component.scss |
| templateUrl |
./menu-bar.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
contentType
|
Type: "container-fluid" | "container"
Default value: 'container'
|
|
|
direction
|
Type: "down" | "up"
|
|
|
inverse
|
Default value: false
|
|
|
menuOptions
|
Type: MenuBar
Default value: <MenuBar>{}
|
|
|
type
|
Type: "navbar-fixed-top" | "navbar-fixed-bottom" | "container-fluid" | "navbar-static-top" | "navbar-static-bottom" | "navbar-form" | "sidebar"
|
|
|
Methods
|
hide
|
hide($event?: Event)
|
|
|
Parameters :
| Name |
Type |
Optional |
| $event |
Event
|
yes
|
|
|
onShowNavBarChange
|
onShowNavBarChange(showNavBar: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| showNavBar |
boolean
|
no
|
|
import { Component, ElementRef, Input } from '@angular/core';
import { MenuBar } from './menu-bar.model';
@Component({
selector: 're-menu-bar',
templateUrl: './menu-bar.component.html',
styleUrls: ['./menu-bar.component.scss'],
exportAs: 'menuBar'
})
export class MenuBarComponent {
@Input() cssClass: string;
@Input() type: 'navbar-fixed-top' | 'navbar-fixed-bottom' | 'container-fluid'
| 'navbar-static-top' | 'navbar-static-bottom' | 'navbar-form' | 'sidebar';
@Input() contentType: 'container-fluid' | 'container' = 'container';
@Input() menuOptions: MenuBar = <MenuBar>{};
@Input() direction: 'down' | 'up';
@Input() inverse = false;
showNavBar: boolean;
sidebarOpen: boolean;
constructor(private elementRef: ElementRef) {
}
toggle($event) {
this.onShowNavBarChange(!this.showNavBar);
}
hide($event?: Event) {
if (!this.elementRef.nativeElement.contains($event.target)) {
this.onShowNavBarChange(false);
}
}
onShowNavBarChange(showNavBar: boolean) {
if (this.showNavBar !== showNavBar) {
this.showNavBar = showNavBar;
}
}
isRouter(url) {
return url instanceof Array;
}
}
<nav class="menu-bar navbar navbar-{{ inverse ? 'inverse' : 'default'}} {{type}} {{cssClass}}"
[ngClass]="{'sidebar-open': sidebarOpen}" (click)="hide($event)">
<div class="{{type == 'sidebar' ? 'container-fluid' : contentType}}">
<div class="navbar-header collapsed" *ngIf="menuOptions.logo || menuOptions.title">
<button type="button" class="navbar-toggle collapsed" aria-expanded="true" aria-controls="navbar"
(click)="toggle($event);">
<span class="sr-only">{{menuOptions.title}}</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a *ngIf="!isRouter(menuOptions.home)" class="navbar-brand text-center" [href]="menuOptions.home">
<img class="logo" *ngIf="menuOptions.logo" [src]="menuOptions.logo" [attr.alt]="menuOptions.title"/>
<span *ngIf="!menuOptions.logo">{{menuOptions.title}}</span>
</a>
<a *ngIf="isRouter(menuOptions.home)" class="navbar-brand text-center" [routerLink]="menuOptions.home"
[queryParams]="menuOptions.homeQueryParams">
<img class="logo" *ngIf="menuOptions.logo" [src]="menuOptions.logo" [attr.alt]="menuOptions.title"/>
<span *ngIf="!menuOptions.logo">{{menuOptions.title}}</span>
</a>
</div>
<div #navbarCollapse class="navbar-collapse" [ngClass]="{collapse: !showNavBar, in: showNavBar}"
aria-expanded="true">
<re-nav-item class="nav-item" [direction]="direction" [menus]="menuOptions.menus"></re-nav-item>
<re-nav-item class="nav-item" [direction]="direction" [menus]="menuOptions.rightMenus"
[right]="true"></re-nav-item>
</div>
</div>
</nav>
Legend
Html element with directive