mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

docs: update menu example to avoid remote (#25291)

Browse source
This commit is contained in:
Jeremy Rose 2020-09-16 14:32:32 -07:00 committed by GitHub
parent ba55aaa53b
commit a200b15600
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
docs/api/menu.md
View file

@ -141,13 +141,7 @@ can have a submenu.
## Examples ## Examples
The `Menu` class is only available in the main process, but you can also use it An example of creating the application menu with the simple template API:
in the render process via the [`remote`](remote.md) module.
### Main process
An example of creating the application menu in the main process with the
simple template API:
```javascript ```javascript
const { app, Menu } = require('electron') const { app, Menu } = require('electron')
@ -257,26 +251,36 @@ Menu.setApplicationMenu(menu)
### Render process ### Render process
Below is an example of creating a menu dynamically in a web page To create menus initiated by the renderer process, send the required
(render process) by using the [`remote`](remote.md) module, and showing it when information to the main process using IPC and have the main process display the
the user right clicks the page: menu on behalf of the renderer.
```html Below is an example of showing a menu when the user right clicks the page:
<!-- index.html -->
<script>
const { remote } = require('electron')
const { Menu, MenuItem } = remote
const menu = new Menu()
menu.append(new MenuItem({ label: 'MenuItem1', click() { console.log('item 1 clicked') } }))
menu.append(new MenuItem({ type: 'separator' }))
menu.append(new MenuItem({ label: 'MenuItem2', type: 'checkbox', checked: true }))
```js
// renderer
window.addEventListener('contextmenu', (e) => { window.addEventListener('contextmenu', (e) => {
e.preventDefault() e.preventDefault()
menu.popup({ window: remote.getCurrentWindow() }) ipcRenderer.send('show-context-menu')
}, false) })
</script>
ipcRenderer.on('context-menu-command', (e, command) => {
// ...
})
// main
ipcMain.on('show-context-menu', (event) => {
const template = [
{
label: 'Menu Item 1',
click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
},
{ type: 'separator' },
{ label: 'Menu Item 2', type: 'checkbox', checked: true }
]
const menu = Menu.buildFromTemplate(template)
menu.popup(BrowserWindow.fromWebContents(event.sender))
})
``` ```
## Notes on macOS Application Menu ## Notes on macOS Application Menu