File
C:/GoDev/src/TCSTK-Angular/projects/tibco-tcstk/tc-core-lib/src/lib/components/tibco-cloud-menu-bar/tibco-cloud-menu-bar.component.ts
Description
TIBCO Cloud Menu Bar
Extends
TibcoCloudWidgetHeaderComponent
Implements
Example
<tc-tibco-cloud-menu-bar></tc-tibco-cloud-menu-bar>Metadata
| selector | tc-tibco-cloud-menu-bar |
| styleUrls | ./tibco-cloud-menu-bar.component.css |
| templateUrl | ./tibco-cloud-menu-bar.component.html |
Index
Properties |
|
Methods |
Inputs |
Outputs |
Constructor
constructor()
|
Inputs
| burgerMenuButtons | |
Type : ToolbarButton[]
|
|
|
|
|
| headerText | |
Type : string
|
|
|
Inherited from
TibcoCloudWidgetHeaderComponent
|
|
|
Defined in
TibcoCloudWidgetHeaderComponent:21
|
|
|
Text shown in menu bar |
|
| icon | |
Type : string
|
|
|
Inherited from
TibcoCloudWidgetHeaderComponent
|
|
|
Defined in
TibcoCloudWidgetHeaderComponent:26
|
|
|
icon name (svg key - needs to be registered) |
|
| showHeader | |
Type : boolean
|
|
|
Inherited from
TibcoCloudWidgetHeaderComponent
|
|
|
Defined in
TibcoCloudWidgetHeaderComponent:37
|
|
| toolbarButtons | |
Type : ToolbarButton[]
|
|
|
Inherited from
TibcoCloudWidgetHeaderComponent
|
|
|
Defined in
TibcoCloudWidgetHeaderComponent:31
|
|
|
buttons to display in the menu bar |
|
Outputs
| burgerMenuButtonEvent | |
Type : EventEmitter<string>
|
|
|
~event burgerMenuButtonEvent : Button Clicked ~payload string : tells caller a button was clicked - outputs button Id |
|
| toolbarButtonEvent | |
Type : EventEmitter<string>
|
|
|
Inherited from
TibcoCloudWidgetHeaderComponent
|
|
|
Defined in
TibcoCloudWidgetHeaderComponent:47
|
|
|
~event toolbarButtonEvent : Button Clicked ~payload string : tells caller a button was clicked - outputs button Id |
|
Methods
| burgerMenuButtonClick | ||||
burgerMenuButtonClick(id)
|
||||
|
Parameters :
Returns :
void
|
| toolbarButtonClick | ||||
toolbarButtonClick(id)
|
||||
|
Inherited from
TibcoCloudWidgetHeaderComponent
|
||||
|
Defined in
TibcoCloudWidgetHeaderComponent:52
|
||||
|
Parameters :
Returns :
void
|
Properties
| burgerButtonMenu |
Type : MatMenu
|
Decorators :
@ViewChild('burgerButtonMenu', {static: false})
|
| Public showHeader |
Type : boolean
|
Default value : true
|
|
Inherited from
TibcoCloudWidgetHeaderComponent
|
|
Defined in
TibcoCloudWidgetHeaderComponent:36
|
|
Whether to show the header bar in the widget - eg. favorites on home page (contains icon etc) - if off icons still appear without bar |
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { TibcoCloudWidgetHeaderComponent } from '../tibco-cloud-widget-header/tibco-cloud-widget-header.component';
import { ToolbarButton } from '../../models/tc-widget-header';
import { MatMenu } from '@angular/material/menu';
/**
* TIBCO Cloud Menu Bar
*
* 
*
* @example <tc-tibco-cloud-menu-bar></tc-tibco-cloud-menu-bar>
*/
@Component({
selector: 'tc-tibco-cloud-menu-bar',
templateUrl: './tibco-cloud-menu-bar.component.html',
styleUrls: ['./tibco-cloud-menu-bar.component.css']
})
export class TibcoCloudMenuBarComponent extends TibcoCloudWidgetHeaderComponent implements OnInit {
/**
* `<tc-tibco-cloud-menu-bar>` render a general menu bar
*/
/**
* buttons to display in the burger menu
*/
@Input() burgerMenuButtons: ToolbarButton[];
/**
* ~event burgerMenuButtonEvent : Button Clicked
* ~payload string : tells caller a button was clicked - outputs button Id
*/
@Output() burgerMenuButtonEvent: EventEmitter<string> = new EventEmitter<string>();
@ViewChild('burgerButtonMenu', {static: false}) burgerButtonMenu: MatMenu;
constructor() {
super();
}
burgerMenuButtonClick(id) {
this.burgerMenuButtonEvent.emit(id);
}
/**
* @ignore
*/
ngOnInit() {
// none
}
}
<div class="tcs-menu-bar-pane" fxLayout="row" fxLayoutAlign="space-between center">
<div *ngIf="burgerMenuButtons && burgerMenuButtons.length > 0" class="tcs-toolbar-button-div" fxLayout="row" fxLayoutAlign="center center">
<button mat-icon-button [matMenuTriggerFor]="burgerButtonMenu">
<mat-icon svgIcon="ic-burger-menu" class="tcs-toolbar-button"></mat-icon>
</button>
<mat-menu #burgerButtonMenu="matMenu">
<div *ngFor="let burgerOption of burgerMenuButtons">
<button mat-menu-item *ngIf="burgerOption.visible" [disabled]="!burgerOption.enabled" (click)="burgerMenuButtonClick(burgerOption.id)" [matTooltip]="burgerOption.tooltip" matTooltipPosition="left" matTooltipShowDelay="1000">
<mat-icon [svgIcon]="burgerOption.icon" [ngClass]="burgerOption.filled ? 'tcs-button-filled' : 'tcs-button-not-filled'"></mat-icon>
<span>{{burgerOption.label}}</span>
</button>
</div>
</mat-menu>
</div>
<div class="tcs-menu-bar-content" fxFlex fxLayout="row" fxLayoutAlign="space-between center">
<div *ngIf="headerText" fxLayoutAlign="start center">
<mat-icon class="tcs-widget-header-icon" svgIcon="{{icon}}"></mat-icon>
<div class="tcs-widget-header-text">{{headerText}}</div>
</div>
<ng-content fxFlex></ng-content>
</div>
<div class="tcs-button-toolbar" fxLayout="row" fxLayoutAlign="center, center">
<div class="tcs-toolbar-button-div" *ngFor="let toolbarButton of toolbarButtons" fxLayout="row" fxLayoutAlign="center center">
<button *ngIf="toolbarButton.visible" mat-icon-button [disabled]="!toolbarButton.enabled" (click)="toolbarButtonClick(toolbarButton.id)">
<mat-icon class="tcs-toolbar-button" [ngClass]="toolbarButton.filled ? 'tcs-button-filled' : 'tcs-button-not-filled'" [matTooltip]="toolbarButton.tooltip" matTooltipPosition="left" matTooltipShowDelay="1000" [svgIcon]="toolbarButton.icon"></mat-icon>
</button>
</div>
</div>
</div>
./tibco-cloud-menu-bar.component.css
.tcs-menu-bar-pane {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.5);
background-color: #ffffff;
height: 65px;
padding-left: 20px;
padding-right: 20px;
}
.tcs-toolbar-button-div {
/*margin-left: 10px;
margin-right: 10px;*/
}
.tcs-menu-bar-content {
margin-right: 20px;
overflow: hidden;
}
.tcs-widget-header-text {
font-family: Source Sans Pro;
font-size: 30px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #212121;
}
:host ::ng-deep .tcs-toolbar-button:hover .svg-content {
fill: #0081cb;
}
:host ::ng-deep .tcs-button-filled .svg-content {
fill: #727272;
}
:host ::ng-deep .tcs-button-not-filled .svg-content {
fill: #dedede;
}
Legend
Html element
Component
Html element with directive