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)
    • windowBrowserWindow (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 si y se declara.
    • y Número (opcional): el valor predeterminado es la posición actual del cursor del mouse. Debe declararse si x 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])

  • browserWindowBrowserWindow (opcional): el valor predeterminado es la ventana enfocada.

Cierra el menú contextual en el browserWindow.

menu.append(menuItem)

  • menuItemOpció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 Entero
  • menuItemOpció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 MenuItemsy 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