Menu
Class: Menu
Cria menus de aplicativo e menus de contexto nativos.
Processo: Main
new Menu()
Cria um novo menu.
Métodos estáticos
A classe Menu
tem os seguintes métodos estáticos:
Menu.setApplicationMenu(menu)
menu
Menu | null
Sets menu
as the application menu on macOS. On Windows and Linux, the menu
will be set as each window's top menu.
Also on Windows and Linux, you can use a &
in the top-level item name to indicate which letter should get a generated accelerator. For example, using &File
for the file menu would result in a generated Alt-F
accelerator that opens the associated menu. The indicated character in the button label then gets an underline, and the &
character is not displayed on the button label.
In order to escape the &
character in an item name, add a proceeding &
. For example, &&File
would result in &File
displayed on the button label.
Passing null
will suppress the default menu. On Windows and Linux, this has the additional effect of removing the menu bar from the window.
Note: The default menu will be created automatically if the app does not set one. It contains standard items such as File
, Edit
, View
, Window
and Help
.
Menu.getApplicationMenu()
Retorna Menu | null
- O menu do aplicativo, se definido, ou null
, se não fora definido.
Nota: A instancia Menu
retornada não suporta adição dinâmica ou remoção de itens de menu. Instance properties ainda podem ser modificadas dinamicamente.
Menu.sendActionToFirstResponder(action)
no macOS
action
string
Sends the action
to the first responder of application. This is used for emulating default macOS menu behaviors. Usually you would use the role
property of a MenuItem
.
See the macOS Cocoa Event Handling Guide for more information on macOS' native actions.
Menu.buildFromTemplate(template)
template
(MenuItemConstructorOptions | MenuItem)[]
Retorna Menu
Generally, the template
is an array of options
for constructing a MenuItem. The usage can be referenced above.
You can also attach other fields to the element of the template
and they will become properties of the constructed menu items.
Métodos de Instância
O objeto menu
possui os seguintes métodos de instância:
menu.popup([options])
- Objeto
options
(opcional)window
BaseWindow (optional) - Default is the focused window.x
number (optional) - Default is the current mouse cursor position. Must be declared ify
is declared.y
number (optional) - Default is the current mouse cursor position. Must be declared ifx
is declared.positioningItem
number (optional) macOS - The index of the menu item to be positioned under the mouse cursor at the specified coordinates. Default is -1.sourceType
string (optional) Windows Linux - This should map to themenuSourceType
provided by thecontext-menu
event. It is not recommended to set this value manually, only provide values you receive from other APIs or leave itundefined
. Can benone
,mouse
,keyboard
,touch
,touchMenu
,longPress
,longTap
,touchHandle
,stylus
,adjustSelection
, oradjustSelectionReset
.callback
Function (optional) - Called when menu is closed.
Pops up this menu as a context menu in the BaseWindow
.
menu.closePopup([window])
window
BaseWindow (optional) - Default is the focused window.
Closes the context menu in the window
.
menu.append(menuItem)
menuItem
MenuItem
Acrescenta o menuItem
ao menu.
menu.getMenuItemById(id)
id
string
Returns MenuItem | null
the item with the specified id
menu.Insert(pos, menuItem)
pos
IntegermenuItem
MenuItem
Insere o menuItem
na posição pos
do menu.
Eventos de instância
Objects created with new Menu
or returned by Menu.buildFromTemplate
emit the following events:
Note: Some events are only available on specific operating systems and are labeled as such.
Event: 'menu-will-show'
Retorna:
event
Event
Emitted when menu.popup()
is called.
Event: 'menu-will-close'
Retorna:
event
Event
Emitted when a popup is closed either manually or with menu.closePopup()
.
Propriedades da Instância
Objetos menu
também possuem as seguintes propriedades:
menu.items
Um array MenuItem[]
contendo os itens do menu.
Cada Menu
consiste de múltiplos MenuItem
s e cada MenuItem
pode ter um submenu.
Exemplos
An example of creating the application menu with the simple template API:
const { app, Menu } = require('electron')
const isMac = process.platform === 'darwin'
const template = [
// { role: 'appMenu' }
...(isMac
? [{
label: app.name,
submenu: [
{ role: 'about' },
{ type: 'separator' },
{ role: 'services' },
{ type: 'separator' },
{ role: 'hide' },
{ role: 'hideOthers' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' }
]
}]
: []),
// { role: 'fileMenu' }
{
label: 'File',
submenu: [
isMac ? { role: 'close' } : { role: 'quit' }
]
},
// { role: 'editMenu' }
{
label: 'Edit',
submenu: [
{ role: 'undo' },
{ role: 'redo' },
{ type: 'separator' },
{ role: 'cut' },
{ role: 'copy' },
{ role: 'paste' },
...(isMac
? [
{ role: 'pasteAndMatchStyle' },
{ role: 'delete' },
{ role: 'selectAll' },
{ type: 'separator' },
{
label: 'Speech',
submenu: [
{ role: 'startSpeaking' },
{ role: 'stopSpeaking' }
]
}
]
: [
{ role: 'delete' },
{ type: 'separator' },
{ role: 'selectAll' }
])
]
},
// { role: 'viewMenu' }
{
label: 'View',
submenu: [
{ role: 'reload' },
{ role: 'forceReload' },
{ role: 'toggleDevTools' },
{ type: 'separator' },
{ role: 'resetZoom' },
{ role: 'zoomIn' },
{ role: 'zoomOut' },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
},
// { role: 'windowMenu' }
{
label: 'Window',
submenu: [
{ role: 'minimize' },
{ role: 'zoom' },
...(isMac
? [
{ type: 'separator' },
{ role: 'front' },
{ type: 'separator' },
{ role: 'window' }
]
: [
{ role: 'close' }
])
]
},
{
role: 'help',
submenu: [
{
label: 'Learn More',
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://electronjs.org')
}
}
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
Processo de renderização
To create menus initiated by the renderer process, send the required information to the main process using IPC and have the main process display the menu on behalf of the renderer.
Below is an example of showing a menu when the user right clicks the page:
// renderer
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
ipcRenderer.send('show-context-menu')
})
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({ window: BrowserWindow.fromWebContents(event.sender) })
})
Notas sobre o Menu de aplicativo no macOS
macOS has a completely different style of application menu from Windows and Linux. Here are some notes on making your app's menu more native-like.
Menus Padrão
On macOS there are many system-defined standard menus, like the Services
and Windows
menus. To make your menu a standard menu, you should set your menu's role
to one of the following and Electron will recognize them and make them become standard menus:
window
help
services
Ações padronizadas para Item de Menu
O macOS fornece ações padronizadas para alguns itens de menu, como About xxx
, Hide xxx
, and Hide Others
. To set the action of a menu item to a standard action, you should set the role
attribute of the menu item.
Nome do Menu Principal
On macOS the label of the application menu's first item is always your app's name, no matter what label you set. To change it, modify your app bundle's Info.plist
file. See About Information Property List Files for more information.
Setting Menu for Specific Browser Window (Linux Windows)
The setMenu
method of browser windows can set the menu of certain browser windows.
Posição do Item de menu
You can make use of before
, after
, beforeGroupContaining
, afterGroupContaining
and id
to control how the item will be placed when building a menu with Menu.buildFromTemplate
.
before
- Inserts this item before the item with the specified id. If the referenced item doesn't exist the item will be inserted at the end of the menu. Also implies that the menu item in question should be placed in the same “group” as the item.after
- Inserts this item after the item with the specified id. If the referenced item doesn't exist the item will be inserted at the end of the menu. Also implies that the menu item in question should be placed in the same “group” as the item.beforeGroupContaining
- Provides a means for a single context menu to declare the placement of their containing group before the containing group of the item with the specified id.afterGroupContaining
- Provides a means for a single context menu to declare the placement of their containing group after the containing group of the item with the specified id.
By default, items will be inserted in the order they exist in the template unless one of the specified positioning keywords is used.
Exemplos
Modelo:
[
{ id: '1', label: 'one' },
{ id: '2', label: 'two' },
{ id: '3', label: 'three' },
{ id: '4', label: 'four' }
]
Menu:
- 1
- 2
- 3
- 4
Modelo:
[
{ id: '1', label: 'one' },
{ type: 'separator' },
{ id: '3', label: 'three', beforeGroupContaining: ['1'] },
{ id: '4', label: 'four', afterGroupContaining: ['2'] },
{ type: 'separator' },
{ id: '2', label: 'two' }
]
Menu:
- 3
- 4
- ---
- 1
- ---
- 2
Modelo:
[
{ id: '1', label: 'one', after: ['3'] },
{ id: '2', label: 'two', before: ['1'] },
{ id: '3', label: 'three' }
]
Menu:
- ---
- 3
- 2
- 1