Created
October 9, 2019 20:29
-
-
Save harryi3t/cb2a63dfda2157f5fc0d7659d754a22a to your computer and use it in GitHub Desktop.
Electron Fiddle Gist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| </head> | |
| <body> | |
| <div> | |
| <div> | |
| <h1>Context Menu</h1> | |
| <i>Supports: Win, macOS, Linux <span>|</span> Process: Main</i> | |
| <hr/> | |
| <div> | |
| <div> | |
| <button id="context-menu">View Demo</button> | |
| </div> | |
| <p>A context, or right-click, menu can be created with the <code>Menu</code> and <code>MenuItem</code> modules as well. You can right-click anywhere in this app or click the demo button to see an example context menu.</p> | |
| <p>In this demo we use the <code>ipcRenderer</code> module to show the context menu when explicitly calling it from the renderer process.</p> | |
| <p>See the full <a href="http://electron.atom.io/docs/api/web-contents/#event-context-menu">context-menu event documentation</a> for all the available properties.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // You can also require other files to run in this process | |
| require('./renderer.js') | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { | |
| BrowserWindow, | |
| Menu, | |
| MenuItem, | |
| ipcMain, | |
| app | |
| } = require('electron') | |
| const menu = new Menu() | |
| menu.append(new MenuItem({ label: 'Hello' })) | |
| menu.append(new MenuItem({ type: 'separator' })) | |
| menu.append(new MenuItem({ label: 'Electron', type: 'checkbox', checked: true })) | |
| let mainWindow = null | |
| function createWindow () { | |
| const windowOptions = { | |
| width: 600, | |
| height: 400, | |
| title: 'Manage Window State', | |
| webPreferences: { | |
| nodeIntegration: true | |
| } | |
| } | |
| mainWindow = new BrowserWindow(windowOptions) | |
| mainWindow.loadFile('index.html') | |
| mainWindow.on('closed', () => { | |
| mainWindow = null | |
| }) | |
| } | |
| app.on('ready', () => { | |
| createWindow() | |
| }) | |
| app.on('browser-window-created', (event, win) => { | |
| win.webContents.on('context-menu', (e, params) => { | |
| menu.popup(win, params.x, params.y) | |
| }) | |
| }) | |
| ipcMain.on('show-context-menu', (event) => { | |
| const win = BrowserWindow.fromWebContents(event.sender) | |
| menu.popup(win) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const {ipcRenderer} = require('electron') | |
| // Tell main process to show the menu when demo button is clicked | |
| const contextMenuBtn = document.getElementById('context-menu') | |
| contextMenuBtn.addEventListener('click', () => { | |
| ipcRenderer.send('show-context-menu') | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment