Ya no necesitas investigar más por internet ya que has llegado al lugar indicado, contamos con la solución que buscas sin complicarte.
Cree menús de aplicaciones nativos y menús contextuales.
Proceso: Principal
new Menu()
Crea un nuevo menú.
Métodos estáticos
los Menu
La clase tiene los siguientes métodos estáticos:
Menu.setApplicationMenu(menu)
menu
Menú | nulo
Conjuntos menu
como el menú de la aplicación en macOS. En Windows y Linux, el menu
se establecerá como el menú superior de cada ventana.
También en Windows y Linux, puede utilizar un &
en el nombre del elemento de nivel superior para indicar qué letra debe obtener un acelerador generado. Por ejemplo, usando &File
para el menú de archivo resultaría en un generado Alt-F
acelerador que abre el menú asociado. El carácter indicado en la etiqueta del botón aparece subrayado. los &
El carácter no se muestra en la etiqueta del botón.
Paso null
suprimirá el menú predeterminado. En Windows y Linux, esto tiene el efecto adicional de eliminar la barra de menú de la ventana.
Nota: El menú predeterminado se creará automáticamente si la aplicación no establece uno. Contiene elementos estándar como File
, Edit
, View
, Window
y Help
.
Menu.getApplicationMenu()
Devoluciones Menu | null
– El menú de la aplicación, si está configurado, o null
, si no está configurado.
Nota: El retorno Menu
La instancia no admite la adición o eliminación dinámica de elementos de menú. Las propiedades de la instancia aún se pueden modificar dinámicamente.
Menu.sendActionToFirstResponder(action)
Mac OS
action
Cuerda
Envía el action
al primer respondedor de la aplicación. Se utiliza para emular los comportamientos predeterminados del menú de macOS. Por lo general, usaría el role
propiedad de un MenuItem
.
Ver el Guía de manejo de eventos de macOS Cocoa para obtener más información sobre las acciones nativas de macOS.
Menu.buildFromTemplate(template)
template
(MenuItemConstructorOptions | MenuItem)[]
Devoluciones Menu
Generalmente, el template
es una matriz de options
para construir un MenuItem. Se puede hacer referencia al uso arriba.
También puede adjuntar otros campos al elemento de la template
y se convertirán en propiedades de los elementos del menú construidos.
Métodos de instancia
los menu
El objeto tiene los siguientes métodos de instancia:
menu.popup([options])
options
Objeto (opcional)window
BrowserWindow (opcional): el valor predeterminado es la ventana enfocada.x
Número (opcional): el valor predeterminado es la posición actual del cursor del mouse. Debe declararse siy
se declara.y
Número (opcional): el valor predeterminado es la posición actual del cursor del mouse. Debe declararse six
se declara.positioningItem
Numero (opcional) Mac OS – El índice del elemento del menú que se colocará debajo del cursor del mouse en las coordenadas especificadas. El valor predeterminado es -1.callback
Función (opcional): se llama cuando el menú está cerrado.
Aparece este menú como menú contextual en el BrowserWindow
.
menu.closePopup([browserWindow])
browserWindow
BrowserWindow (opcional): el valor predeterminado es la ventana enfocada.
Cierra el menú contextual en el browserWindow
.
menu.append(menuItem)
menuItem
Opción del menú
Añade el menuItem
al menú.
menu.getMenuItemById(id)
id
Cuerda
Devoluciones MenuItem | null
el artículo con el especificado id
menu.insert(pos, menuItem)
pos
EnteromenuItem
Opción del menú
Inserta el menuItem
al pos
posición del menú.
Eventos de instancia
Objetos creados con new Menu
o devuelto por Menu.buildFromTemplate
emitir los siguientes eventos:
Nota: Algunos eventos solo están disponibles en sistemas operativos específicos y están etiquetados como tales.
Evento: ‘menu-will-show’
Devoluciones:
event
Evento
Emitido cuando menu.popup()
se llama.
Evento: ‘menu-will-close’
Devoluciones:
event
Evento
Emitido cuando una ventana emergente se cierra manualmente o con menu.closePopup()
.
Propiedades de la instancia
menu
Los objetos también tienen las siguientes propiedades:
menu.items
A MenuItem[]
matriz que contiene los elementos del menú.
Cada Menu
consta de múltiples MenuItem
sy cada uno MenuItem
puede tener un submenú.
Ejemplos de
Un ejemplo de cómo crear el menú de la aplicación con la API de plantilla simple:
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)
Proceso de renderizado
Para crear menús iniciados por el proceso de renderizado, envíe la información requerida al proceso principal usando IPC y haga que el proceso principal muestre el menú en nombre del renderizador.
A continuación se muestra un ejemplo de cómo se muestra un menú cuando el usuario hace clic con el botón derecho en la página:
// 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(BrowserWindow.fromWebContents(event.sender)))
Notas sobre el menú de aplicaciones de macOS
macOS tiene un estilo de menú de aplicaciones completamente diferente al de Windows y Linux. Aquí hay algunas notas sobre cómo hacer que el menú de su aplicación sea más nativo.
Menús estándar
En macOS hay muchos menús estándar definidos por el sistema, como el Services
y Windows
menús. Para que su menú sea un menú estándar, debe configurar el role
a uno de los siguientes y Electron los reconocerá y los convertirá en menús estándar:
window
help
services
Acciones de elementos de menú estándar
macOS ha proporcionado acciones estándar para algunos elementos del menú, como About xxx
, Hide xxx
, y Hide Others
. Para establecer la acción de un elemento del menú en una acción estándar, debe establecer el role
atributo del elemento del menú.
Nombre del menú principal
En macOS, la etiqueta del primer elemento del menú de la aplicación es siempre el nombre de la aplicación, sin importar la etiqueta que establezca. Para cambiarlo, modifique el paquete de su aplicación Info.plist
expediente. Ver Acerca de los archivos de lista de propiedades de información para más información.
Menú de configuración para una ventana específica del navegador (LinuxVentanas)
los setMenu
método de las ventanas del navegador puede configurar el menú de ciertas ventanas del navegador.
Posición del elemento del menú
Puedes hacer uso de before
, after
, beforeGroupContaining
, afterGroupContaining
y id
para controlar cómo se colocará el elemento al crear un menú con Menu.buildFromTemplate
.
before
– Inserta este elemento antes del elemento con la etiqueta especificada. Si el elemento referenciado no existe, el elemento se insertará al final del menú. También implica que el elemento del menú en cuestión debe colocarse en el mismo “grupo” que el elemento.after
– Inserta este elemento después del elemento con la etiqueta especificada. Si el elemento referenciado no existe, el elemento se insertará al final del menú. También implica que el elemento del menú en cuestión debe colocarse en el mismo “grupo” que el elemento.beforeGroupContaining
– Proporciona un medio para que un menú contextual único declare la ubicación de su grupo contenedor antes del grupo contenedor del elemento con la etiqueta especificada.afterGroupContaining
– Proporciona un medio para que un menú contextual único declare la ubicación de su grupo contenedor después del grupo contenedor del elemento con la etiqueta especificada.
De forma predeterminada, los elementos se insertarán en el orden en que existen en la plantilla, a menos que se utilice una de las palabras clave de posicionamiento especificadas.
Ejemplos de
Plantilla:
[ id:'1', label:'one', id:'2', label:'two', id:'3', label:'three', id:'4', label:'four']
Menú:
- 1 - 2 - 3 - 4
Plantilla:
[ id:'1', label:'one', type:'separator', id:'3', label:'three', beforeGroupContaining:['1'], id:'4', label:'four', afterGroupContaining:['2'], type:'separator', id:'2', label:'two']
Menú:
- 3 - 4 - --- - 1 - --- - 2
Plantilla:
[ id:'1', label:'one', after:['3'], id:'2', label:'two', before:['1'], id:'3', label:'three']
Menú:
- --- - 3 - 2 - 1