Hierarchical Menus

You can create Hierarchical Menus with the Menu control also by setting the subItemsPath to a property value that is part of your data source. This sample uses a few Menu controls with hierarchical Menus to demonstrate supported features modify the div below.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@grapecity/wijmo.input'; import * as wijmo from '@grapecity/wijmo'; import { getMenuTree } from './data'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { let menuTree = getMenuTree(); // // element used to show menu commands let target = document.querySelector('#menuTarget'), targetStyle = target.style, computedStyle = getComputedStyle(target); // // create File menu (uses itemClicked event) let menuFile = new input.Menu('#menu-file', { header: 'File', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.fileMenu, itemClicked: (sender) => { target.innerHTML = `Thank you for clicking <b><i>${sender.text}</i></b>!`; } }); // // create Edit menu (uses itemClicked event) let menuEdit = new input.Menu('#menu-edit', { header: 'Edit', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.editMenu, itemClicked: (sender) => { target.innerHTML = `Thank you for clicking <b><i>${sender.text}</i></b>!`; } }); // // create Format menu (uses command property) let menuFormat = new input.Menu('#menu-format', { header: 'Format', displayMemberPath: 'header', subItemsPath: 'items', openOnHover: true, isAnimated: true, itemsSource: menuTree.formatMenu, command: getFormatMenuCommand() }); // // toggle animations document.querySelector('#isAnimated').addEventListener('click', e => { [menuFile, menuEdit, menuFormat].forEach(menu => { menu.isAnimated = e.target.checked; }); }); // // toggle open on hover document.querySelector('#openOnHover').addEventListener('click', e => { [menuFile, menuEdit, menuFormat].forEach(menu => { menu.openOnHover = e.target.checked; }); }); // // show right-to-left menus document.querySelector('#rtl').addEventListener('click', e => { let menubar = document.querySelector('.menubar'); menubar.setAttribute('dir', e.target.checked ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); }); // // format menu command function getFormatMenuCommand() { return { executeCommand: (param) => { switch (param.prop) { case 'face': targetStyle.fontFamily = param.header; break; case 'font': switch (param.header) { case 'Bold': targetStyle.fontWeight = targetStyle.fontWeight ? '' : 'bold'; break; case 'Italic': targetStyle.fontStyle = targetStyle.fontStyle ? '' : 'italic'; break; case 'Underline': targetStyle.textDecoration = targetStyle.textDecoration ? '' : 'underline'; break; case 'Larger': targetStyle.fontSize = (parseFloat(computedStyle.fontSize) * 1.2) + 'px'; break; case 'Smaller': targetStyle.fontSize = (parseFloat(computedStyle.fontSize) * .8) + 'px'; break; } break; case 'color': targetStyle.color = param.header.toLowerCase(); break; case 'background': targetStyle.background = param.header.toLowerCase(); break; } }, canExecuteCommand: (param) => { switch (param.prop) { case 'face': return targetStyle.fontFamily != param.header; case 'font': switch (param.header) { case 'Larger': return parseFloat(computedStyle.fontSize) < 24; case 'Smaller': return parseFloat(computedStyle.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return targetStyle.color != color && targetStyle.background != color; } return true; } }; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Hierarchical Menus</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="menubar"> <div id="menu-file"></div> <div id="menu-edit"></div> <div id="menu-format"></div> </div> <p id="menuTarget"> Wijmo Menus are great! </p> <label> openOnHover <input id="openOnHover" type="checkbox" checked="checked"> </label> <label> isAnimated <input id="isAnimated" type="checkbox" checked="checked"> </label> <label> Right-to-Left <input id="rtl" type="checkbox"> </label> </div> </body> </html> // export function getMenuTree() { return { fileMenu: [ { header: 'New', items: [ { header: 'Project' }, { header: 'Site' }, { header: 'File' } ] }, { header: 'Open' }, { header: 'Save' }, { header: 'Save As', items: [ { header: 'Normal' }, { header: 'Compressed' }, { header: 'Encrypted' } ] }, { header: '-' }, { header: 'Exit' } ], editMenu: [ { header: 'Go to', items: [ { header: 'Line' }, { header: 'Symbol' }, { header: 'File', items: [ { header: 'Current Project' }, { header: 'Current Solution' }, { header: 'Select...' } ] } ] }, { header: 'Find and Replace', items: [ { header: 'Quick Find' }, { header: 'Quick Replace' }, { header: 'Find in Files' }, { header: 'Replace in Files', items: [ { header: 'All' }, { header: 'Read/Write Only' } ] } ] }, { header: '-' }, { header: 'Undo' }, { header: 'Redo' } ], formatMenu: [ { header: 'Font', items: [ { header: 'Family', items: [ { header: 'Arial', prop: 'face' }, { header: 'Times', prop: 'face' }, { header: 'Courier', prop: 'face' }, { header: 'Verdana', prop: 'face' }, { header: 'Georgia', prop: 'face' } ] }, { header: 'Bold', prop: 'font' }, { header: 'Italic', prop: 'font' }, { header: 'Underline', prop: 'font' }, { header: '-' }, { header: 'Larger', prop: 'font' }, { header: 'Smaller', prop: 'font' } ] }, { header: 'Color', items: [ { header: 'Black', prop: 'color' }, { header: 'Red', prop: 'color' }, { header: 'Green', prop: 'color' }, { header: 'Blue', prop: 'color' } ] }, { header: 'Background', items: [ { header: 'White', prop: 'background' }, { header: 'Red', prop: 'background' }, { header: 'Green', prop: 'background' }, { header: 'Blue', prop: 'background' } ] } ] }; } label { margin-bottom: 15px; margin-right: 25px; } /* element affected by the menu commands */ #menuTarget { font-size: 18pt; text-align: center; padding: 16px; margin: 6px 0; background: #00c1d5; color: black; border: 1px solid rgba(0, 0, 0, .25); } /* bar containing the menus */ .menubar { position: sticky; display: flex; background: #fddfa7; padding: 12px; top: 0; } /* customize wijmo default styles */ .wj-state-selected { color: black; background: orange; } .wj-menu { padding: 6px 14px; border: none; background: transparent; } .wj-menu:hover, .wj-menu.wj-state-focused { background: rgba(0, 0, 0, .05); } .wj-menu .wj-input-group .wj-input-group-btn { /* hide the menu's drop-down buttons */ display: none; } .wj-listbox.wj-menu-items { min-width: 8em; border: none; background: #fddfa7; } .wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) { padding: 6px 12px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wijmo from '@grapecity/wijmo'; import * as input from '@grapecity/wijmo.input'; // import { Component, enableProdMode, ElementRef, NgModule, Inject, ViewChild, OnInit } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { WjInputModule } from '@grapecity/wijmo.angular2.input'; import { DataService, TMenuTree, TMenuItem } from './app.data'; // @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent implements OnInit { @ViewChild('menuTarget') private _menuTarget: ElementRef; // element used to show menu commands @ViewChild('fileMenu') private _fileMenu: input.Menu; @ViewChild('editMenu') private _editMenu: input.Menu; @ViewChild('formatMenu') private _formatMenu: input.Menu; private _rtl = false; // menuTree: TMenuTree; isAnimated = true; openOnHover = true; // constructor(@Inject(DataService) private dataService: DataService) { this.menuTree = dataService.getMenuTree(); } // get rtl(): boolean { return this._rtl; } set rtl(value: boolean) { let menubar = <HTMLElement>document.querySelector('.menubar'); menubar.setAttribute('dir', (this._rtl = value) ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); } // ngOnInit() { this._fileMenu.itemClicked.addHandler(this.menuItemClicked.bind(this)); this._editMenu.itemClicked.addHandler(this.menuItemClicked.bind(this)); this._formatMenu.command = this.formatMenuCommand; } // menuItemClicked(menu: input.Menu) { this._menuTarget.nativeElement.innerHTML = `Thank you for clicking <b><i>${menu.text}</i></b>!`; } // formatMenuCommand = { executeCommand: (param: TMenuItem) => { let ts = this._menuTarget.nativeElement.style; let cs = getComputedStyle(this._menuTarget.nativeElement); // switch (param.prop) { case 'face': ts.fontFamily = param.header; break; case 'font': switch (param.header) { case 'Bold': ts.fontWeight = ts.fontWeight ? '' : 'bold'; break; case 'Italic': ts.fontStyle = ts.fontStyle ? '' : 'italic'; break; case 'Underline': ts.textDecoration = ts.textDecoration ? '' : 'underline'; break; case 'Larger': ts.fontSize = (parseFloat(cs.fontSize) * 1.2) + 'px'; break; case 'Smaller': ts.fontSize = (parseFloat(cs.fontSize) * .8) + 'px'; break; } break; case 'color': ts.color = param.header.toLowerCase(); break; case 'background': ts.background = param.header.toLowerCase(); break; } }, canExecuteCommand: (param: TMenuItem) => { let ts = this._menuTarget.nativeElement.style; let cs = getComputedStyle(this._menuTarget.nativeElement); // switch (param.prop) { case 'face': return ts.fontFamily != param.header; case 'font': switch (param.header) { case 'Larger': return parseFloat(cs.fontSize) < 24; case 'Smaller': return parseFloat(cs.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return ts.color != color && ts.background != color; } return true; } } } // @NgModule({ imports: [WjInputModule, FormsModule, BrowserModule], declarations: [AppComponent], providers: [DataService], bootstrap: [AppComponent] }) export class AppModule { } // enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Hierarchical Menus</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <div class="menubar"> <wj-menu #fileMenu [header]="'File'" [displayMemberPath]="'header'" [subItemsPath]="'items'" [openOnHover]="openOnHover" [isAnimated]="isAnimated" [itemsSource]="menuTree.fileMenu"> </wj-menu> <wj-menu #editMenu [header]="'Edit'" [displayMemberPath]="'header'" [subItemsPath]="'items'" [openOnHover]="openOnHover" [isAnimated]="isAnimated" [itemsSource]="menuTree.editMenu"> </wj-menu> <wj-menu #formatMenu [header]="'Format'" [displayMemberPath]="'header'" [subItemsPath]="'items'" [openOnHover]="openOnHover" [isAnimated]="isAnimated" [itemsSource]="menuTree.formatMenu"> </wj-menu> </div> <p #menuTarget id="menuTarget"> Wijmo Menus are great! </p> <label> openOnHover <input type="checkbox" [(ngModel)]="openOnHover"> </label> <label> isAnimated <input type="checkbox" [(ngModel)]="isAnimated"> </label> <label> Right-to-Left <input type="checkbox" [(ngModel)]="rtl"> </label> </div> import { Injectable } from '@angular/core'; // export type TMenuItem = { header: string; prop?: string; items?: TMenuItem[] } // export type TMenuTree = { [key: string]: TMenuItem[] } // @Injectable() export class DataService { getMenuTree() { return <TMenuTree>{ fileMenu: [ { header: 'New', items: [ { header: 'Project' }, { header: 'Site' }, { header: 'File' } ] }, { header: 'Open' }, { header: 'Save' }, { header: 'Save As', items: [ { header: 'Normal' }, { header: 'Compressed' }, { header: 'Encrypted' } ] }, { header: '-' }, { header: 'Exit' } ], editMenu: [ { header: 'Go to', items: [ { header: 'Line' }, { header: 'Symbol' }, { header: 'File', items: [ { header: 'Current Project' }, { header: 'Current Solution' }, { header: 'Select...' } ] } ] }, { header: 'Find and Replace', items: [ { header: 'Quick Find' }, { header: 'Quick Replace' }, { header: 'Find in Files' }, { header: 'Replace in Files', items: [ { header: 'All' }, { header: 'Read/Write Only' } ] } ] }, { header: '-' }, { header: 'Undo' }, { header: 'Redo' } ], formatMenu: [ { header: 'Font', items: [ { header: 'Family', items: [ { header: 'Arial', prop: 'face' }, { header: 'Times', prop: 'face' }, { header: 'Courier', prop: 'face' }, { header: 'Verdana', prop: 'face' }, { header: 'Georgia', prop: 'face' } ] }, { header: 'Bold', prop: 'font' }, { header: 'Italic', prop: 'font' }, { header: 'Underline', prop: 'font' }, { header: '-' }, { header: 'Larger', prop: 'font' }, { header: 'Smaller', prop: 'font' } ] }, { header: 'Color', items: [ { header: 'Black', prop: 'color' }, { header: 'Red', prop: 'color' }, { header: 'Green', prop: 'color' }, { header: 'Blue', prop: 'color' } ] }, { header: 'Background', items: [ { header: 'White', prop: 'background' }, { header: 'Red', prop: 'background' }, { header: 'Green', prop: 'background' }, { header: 'Blue', prop: 'background' } ] } ] }; } } label { margin-bottom: 15px; margin-right: 25px; } /* element affected by the menu commands */ #menuTarget { font-size: 18pt; text-align: center; padding: 16px; margin: 6px 0; background: #00c1d5; color: black; border: 1px solid rgba(0, 0, 0, .25); } /* bar containing the menus */ .menubar { position: sticky; display: flex; background: #fddfa7; padding: 12px; top: 0; } /* customize wijmo default styles */ .wj-state-selected { color: black; background: orange; } .wj-menu { padding: 6px 14px; border: none; background: transparent; } .wj-menu:hover, .wj-menu.wj-state-focused { background: rgba(0, 0, 0, .05); } .wj-menu .wj-input-group .wj-input-group-btn { /* hide the menu's drop-down buttons */ display: none; } .wj-listbox.wj-menu-items { min-width: 8em; border: none; background: #fddfa7; } .wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) { padding: 6px 12px; } <template> <div class="container-fluid"> <div class="menubar"> <wj-menu id="fileMenu" :header="'File'" :displayMemberPath="'header'" :subItemsPath="'items'" :showDropDownButton="false" :openOnHover="openOnHover" :isAnimated="isAnimated" :itemsSource="menuTree.fileMenu" :itemClicked="menuItemClicked" :initialized="initMenu"></wj-menu> <wj-menu id="editMenu" :header="'Edit'" :displayMemberPath="'header'" :subItemsPath="'items'" :showDropDownButton="false" :openOnHover="openOnHover" :isAnimated="isAnimated" :itemsSource="menuTree.editMenu" :itemClicked="menuItemClicked" :initialized="initMenu"></wj-menu> <wj-menu id="formatMenu" :header="'Format'" :displayMemberPath="'header'" :subItemsPath="'items'" :showDropDownButton="false" :openOnHover="openOnHover" :isAnimated="isAnimated" :itemsSource="menuTree.formatMenu" :initialized="initMenu"> </wj-menu> </div> <p id="menuTarget" ref="menuTarget"> Wijmo Menus are great! </p> <label> openOnHover <input type="checkbox" v-model="openOnHover"> </label> <label> isAnimated <input type="checkbox" v-model="isAnimated"> </label> <label> Right-to-Left <input type="checkbox" @change="rtlChanged"> </label> </div> </template> <script> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import Vue from 'vue'; import '@grapecity/wijmo.vue2.core'; import '@grapecity/wijmo.vue2.input'; import '@grapecity/wijmo.vue2.chart'; import '@grapecity/wijmo.vue2.grid'; import { getMenuTree } from './data'; let App = Vue.extend({ name: 'app', data: function() { return { menuTree: getMenuTree(), isAnimated: true, openOnHover: true, fileMenu: {}, editMenu: {}, formatMenu: {}, menuTarget: {} }; }, methods: { initMenu(menu) { this[menu.hostElement.id] = menu; }, menuItemClicked(menu) { this.menuTarget.innerHTML = `Thank you for clicking <b><i>${menu.text}</i></b>!`; }, formatMenuCommand(param) { let that = this; return { executeCommand: function(param){ let ts = that.menuTarget.style; let cssStyle = window.getComputedStyle(that.menuTarget, null); switch (param.prop) { case 'face': ts.fontFamily = param.header; break; case 'font': switch (param.header) { case 'Bold': ts.fontWeight = ts.fontWeight ? '' : 'bold'; break; case 'Italic': ts.fontStyle = ts.fontStyle ? '' : 'italic'; break; case 'Underline': ts.textDecoration = ts.textDecoration ? '' : 'underline'; break; case 'Larger': ts.fontSize = (parseFloat(cssStyle.fontSize) * 1.2) + 'px'; break; case 'Smaller': ts.fontSize = (parseFloat(cssStyle.fontSize) * .8) + 'px'; break; } break; case 'color': ts.color = param.header.toLowerCase(); break; case 'background': ts.background = param.header.toLowerCase(); break; } }, canExecuteCommand: function(param){ let ts = that.menuTarget.style; let cssStyle = window.getComputedStyle(that.menuTarget, null); switch (param.prop) { case 'face': return ts.fontFamily != param.header; case 'font': switch (param.header) { case 'Larger': return parseFloat(cssStyle.fontSize) < 24; case 'Smaller': return parseFloat(cssStyle.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return ts.color != color && ts.background != color; } return true; } } }, rtlChanged(e) { let menubar = document.querySelector('.menubar'); menubar.setAttribute('dir', e.target.checked ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); } }, mounted() { this.formatMenu.command = this.formatMenuCommand(); this.menuTarget = this.$refs.menuTarget; } }) let vm = new Vue({ render: h => h(App) }).$mount('#app'); </script> <style> label { margin-bottom: 15px; margin-right: 25px; } /* element affected by the menu commands */ #menuTarget { font-size: 18pt; text-align: center; padding: 16px; margin: 6px 0; background: #00c1d5; color: black; border: 1px solid rgba(0, 0, 0, .25); } /* bar containing the menus */ .menubar { position: sticky; display: flex; background: #fddfa7; padding: 12px; top: 0; } /* customize wijmo default styles */ .wj-state-selected { color: black; background: orange; } .container-fluid .wj-menu { padding: 6px 14px; border: none; background: transparent; } .container-fluid .wj-menu:hover, .container-fluid .wj-menu.wj-state-focused { background: rgba(0, 0, 0, .05); } .container-fluid .wj-menu .wj-input-group .wj-input-group-btn { /* hide the menu's drop-down buttons */ display: none; } .wj-listbox.wj-menu-items { min-width: 8em; border: none; background: #fddfa7; } .wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) { padding: 6px 12px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Hierarchical Menus</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"></div> </body> </html> // export function getMenuTree() { return { fileMenu: [ { header: 'New', items: [ { header: 'Project' }, { header: 'Site' }, { header: 'File' } ] }, { header: 'Open' }, { header: 'Save' }, { header: 'Save As', items: [ { header: 'Normal' }, { header: 'Compressed' }, { header: 'Encrypted' } ] }, { header: '-' }, { header: 'Exit' } ], editMenu: [ { header: 'Go to', items: [ { header: 'Line' }, { header: 'Symbol' }, { header: 'File', items: [ { header: 'Current Project' }, { header: 'Current Solution' }, { header: 'Select...' } ] } ] }, { header: 'Find and Replace', items: [ { header: 'Quick Find' }, { header: 'Quick Replace' }, { header: 'Find in Files' }, { header: 'Replace in Files', items: [ { header: 'All' }, { header: 'Read/Write Only' } ] } ] }, { header: '-' }, { header: 'Undo' }, { header: 'Redo' } ], formatMenu: [ { header: 'Font', items: [ { header: 'Family', items: [ { header: 'Arial', prop: 'face' }, { header: 'Times', prop: 'face' }, { header: 'Courier', prop: 'face' }, { header: 'Verdana', prop: 'face' }, { header: 'Georgia', prop: 'face' } ] }, { header: 'Bold', prop: 'font' }, { header: 'Italic', prop: 'font' }, { header: 'Underline', prop: 'font' }, { header: '-' }, { header: 'Larger', prop: 'font' }, { header: 'Smaller', prop: 'font' } ] }, { header: 'Color', items: [ { header: 'Black', prop: 'color' }, { header: 'Red', prop: 'color' }, { header: 'Green', prop: 'color' }, { header: 'Blue', prop: 'color' } ] }, { header: 'Background', items: [ { header: 'White', prop: 'background' }, { header: 'Red', prop: 'background' }, { header: 'Green', prop: 'background' }, { header: 'Blue', prop: 'background' } ] } ] }; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; // import * as wijmo from '@grapecity/wijmo'; import * as wjInput from '@grapecity/wijmo.react.input'; import { getMenuTree } from './data'; // class App extends React.Component { constructor(props) { super(props); this._menuTree = getMenuTree(); this._menuTarget = null; this.state = { isAnimated: true, openOnHover: true }; } render() { return <div className="container-fluid"> <div className="menubar"> <wjInput.Menu id="fileMenu" header="File" displayMemberPath="header" subItemsPath="items" showDropDownButton={false} openOnHover={this.state.openOnHover} isAnimated={this.state.isAnimated} itemsSource={this._menuTree.fileMenu} itemClicked={this._menuItemClicked.bind(this)}> </wjInput.Menu> <wjInput.Menu id="editMenu" header="Edit" displayMemberPath="header" subItemsPath="items" showDropDownButton={false} openOnHover={this.state.openOnHover} isAnimated={this.state.isAnimated} itemsSource={this._menuTree.editMenu} itemClicked={this._menuItemClicked.bind(this)}> </wjInput.Menu> <wjInput.Menu id="formatMenu" header="Format" displayMemberPath="header" subItemsPath="items" openOnHover={this.state.openOnHover} isAnimated={this.state.isAnimated} itemsSource={this._menuTree.formatMenu} initialized={this._initFormatMenu.bind(this)}> </wjInput.Menu> </div> <p id="menuTarget" ref="menuTarget"> Wijmo Menus are great! </p> <label> openOnHover <input type="checkbox" defaultChecked={this.state.openOnHover} onChange={e => { this._changeOpenOnHover(e.target.checked); }}/> </label> <label> isAnimated <input type="checkbox" defaultChecked={this.state.isAnimated} onChange={e => { this._changeAnimation(e.target.checked); }}/> </label> <label> Right-to-Left <input type="checkbox" defaultChecked={false} onChange={e => { this._changeRtl(e.target.checked); }}/> </label> </div>; } componentDidMount() { this._menuTarget = this.refs.menuTarget; } _initFormatMenu(sender) { sender.command = { executeCommand: (param) => { let ts = this._menuTarget.style; let cssStyle = window.getComputedStyle(this._menuTarget, null); switch (param.prop) { case 'face': ts.fontFamily = param.header; break; case 'font': switch (param.header) { case 'Bold': ts.fontWeight = ts.fontWeight ? '' : 'bold'; break; case 'Italic': ts.fontStyle = ts.fontStyle ? '' : 'italic'; break; case 'Underline': ts.textDecoration = ts.textDecoration ? '' : 'underline'; break; case 'Larger': ts.fontSize = (parseFloat(cssStyle.fontSize) * 1.2) + 'px'; break; case 'Smaller': ts.fontSize = (parseFloat(cssStyle.fontSize) * .8) + 'px'; break; } break; case 'color': ts.color = param.header.toLowerCase(); break; case 'background': ts.background = param.header.toLowerCase(); break; } }, canExecuteCommand: (param) => { let ts = this._menuTarget.style; let cssStyle = window.getComputedStyle(this._menuTarget, null); switch (param.prop) { case 'face': return ts.fontFamily != param.header; case 'font': switch (param.header) { case 'Larger': return parseFloat(cssStyle.fontSize) < 24; case 'Smaller': return parseFloat(cssStyle.fontSize) > 8; } break; case 'color': case 'background': let color = param.header.toLowerCase(); return ts.color != color && ts.background != color; } return true; } }; } _menuItemClicked(sender) { this._menuTarget.innerHTML = `Thank you for clicking <b><i>${sender.text}</i></b>!`; } _changeOpenOnHover(value) { this.setState({ openOnHover: value }); } _changeAnimation(value) { this.setState({ isAnimated: value }); } _changeRtl(value) { let menubar = document.querySelector('.menubar'); menubar.setAttribute('dir', value ? 'rtl' : 'ltr'); wijmo.Control.refreshAll(menubar); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AutoComplete</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> label { margin-bottom: 15px; margin-right: 25px; } /* element affected by the menu commands */ #menuTarget { font-size: 18pt; text-align: center; padding: 16px; margin: 6px 0; background: #00c1d5; color: black; border: 1px solid rgba(0, 0, 0, .25); } /* bar containing the menus */ .menubar { position: sticky; display: flex; background: #fddfa7; padding: 12px; top: 0; } /* customize wijmo default styles */ .wj-state-selected { color: black; background: orange; } .wj-menu { padding: 6px 14px; border: none; background: transparent; } .wj-menu:hover, .wj-menu.wj-state-focused { background: rgba(0, 0, 0, .05); } .wj-menu .wj-input-group .wj-input-group-btn { /* hide the menu's drop-down buttons */ display: none; } .wj-listbox.wj-menu-items { min-width: 8em; border: none; background: #fddfa7; } .wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) { padding: 6px 12px; } export function getMenuTree() { return { fileMenu: [ { header: 'New', items: [ { header: 'Project' }, { header: 'Site' }, { header: 'File' } ] }, { header: 'Open' }, { header: 'Save' }, { header: 'Save As', items: [ { header: 'Normal' }, { header: 'Compressed' }, { header: 'Encrypted' } ] }, { header: '-' }, { header: 'Exit' } ], editMenu: [ { header: 'Go to', items: [ { header: 'Line' }, { header: 'Symbol' }, { header: 'File', items: [ { header: 'Current Project' }, { header: 'Current Solution' }, { header: 'Select...' } ] } ] }, { header: 'Find and Replace', items: [ { header: 'Quick Find' }, { header: 'Quick Replace' }, { header: 'Find in Files' }, { header: 'Replace in Files', items: [ { header: 'All' }, { header: 'Read/Write Only' } ] } ] }, { header: '-' }, { header: 'Undo' }, { header: 'Redo' } ], formatMenu: [ { header: 'Font', items: [ { header: 'Family', items: [ { header: 'Arial', prop: 'face' }, { header: 'Times', prop: 'face' }, { header: 'Courier', prop: 'face' }, { header: 'Verdana', prop: 'face' }, { header: 'Georgia', prop: 'face' } ] }, { header: 'Bold', prop: 'font' }, { header: 'Italic', prop: 'font' }, { header: 'Underline', prop: 'font' }, { header: '-' }, { header: 'Larger', prop: 'font' }, { header: 'Smaller', prop: 'font' } ] }, { header: 'Color', items: [ { header: 'Black', prop: 'color' }, { header: 'Red', prop: 'color' }, { header: 'Green', prop: 'color' }, { header: 'Blue', prop: 'color' } ] }, { header: 'Background', items: [ { header: 'White', prop: 'background' }, { header: 'Red', prop: 'background' }, { header: 'Green', prop: 'background' }, { header: 'Blue', prop: 'background' } ] } ] }; }