phosphor-menus
Phosphor widgets for creating menus and menu bars.
Package Install
Prerequisites
npm install --save phosphor-menusSource Build
Prerequisites
git clone https://github.com/phosphorjs/phosphor-menus.git
cd phosphor-menus
npm installRebuild
npm run clean
npm run buildRun Tests
Follow the source build instructions first.
# run tests in Firefox
npm test
# run tests in Chrome
npm run test:chrome
# run tests in IE
npm run test:ieBuild Docs
Follow the source build instructions first.
npm run docsNavigate to docs/index.html.
Supported Runtimes
The runtime versions which are currently known to work are listed below. Earlier versions may also work, but come with no guarantees.
- IE 11+
- Firefox 32+
- Chrome 38+
Bundle for the Browser
Follow the package install instructions first.
npm install --save-dev browserify browserify-css
browserify myapp.js -o mybundle.jsUsage Examples
Note: This module is fully compatible with Node/Babel/ES6/ES5. Simply omit the type declarations when using a language other than TypeScript.
import {
Menu, MenuBar, MenuItem
} from 'phosphor-menus';
function main(): void {
let logHandler = (item: MenuItem) => {
console.log(item.text);
};
let fileMenu = new Menu([
new MenuItem({
text: 'New File',
shortcut: 'Ctrl+N',
handler: logHandler
}),
new MenuItem({
text: 'Open File',
shortcut: 'Ctrl+O',
handler: logHandler
}),
new MenuItem({
text: 'Save As...',
shortcut: 'Ctrl+Shift+S',
handler: logHandler
}),
new MenuItem({
type: MenuItem.Separator
}),
new MenuItem({
text: 'Exit',
handler: logHandler
})
]);
let editMenu = new Menu([
new MenuItem({
text: '&Undo',
icon: 'fa fa-undo',
shortcut: 'Ctrl+Z',
handler: logHandler
}),
new MenuItem({
text: '&Repeat',
icon: 'fa fa-repeat',
shortcut: 'Ctrl+Y',
handler: logHandler
}),
new MenuItem({
type: MenuItem.Separator
}),
new MenuItem({
text: '&Copy',
icon: 'fa fa-copy',
shortcut: 'Ctrl+C',
handler: logHandler
}),
new MenuItem({
text: 'Cu&t',
icon: 'fa fa-cut',
shortcut: 'Ctrl+X',
handler: logHandler
}),
new MenuItem({
text: '&Paste',
icon: 'fa fa-paste',
shortcut: 'Ctrl+V',
handler: logHandler
})
]);
let contextMenu = new Menu([
new MenuItem({
text: '&Copy',
icon: 'fa fa-copy',
shortcut: 'Ctrl+C',
handler: logHandler
}),
new MenuItem({
text: 'Cu&t',
icon: 'fa fa-cut',
shortcut: 'Ctrl+X',
handler: logHandler
}),
new MenuItem({
text: '&Paste',
icon: 'fa fa-paste',
shortcut: 'Ctrl+V',
handler: logHandler
})
]);
let menuBar = new MenuBar([
new MenuItem({
text: 'File',
submenu: fileMenu
}),
new MenuItem({
text: 'Edit',
submenu: editMenu
})
]);
menuBar.attach(document.body);
document.addEventListener('contextmenu', (event: MouseEvent) => {
event.preventDefault();
let x = event.clientX;
let y = event.clientY;
contextMenu.popup(x, y);
});
}
