Menu

Clase: Menú

Crea menús de aplicaciones nativas y menús contextuales.

Proceso: principal

new Menu()

Crea un nuevo menú.

Métodos Estáticos

La clase Menu tiene los siguientes métodos estáticos:

Menu.setApplicationMenu(menu)

• menu Menu | null

Establece menu como el menú de la aplicación en macOS. En Windows y Linux el menu será establecido como el menú superior de la ventana.

Además en Windows y Linux, puedes usar un & en el nombre del ítem de nivel superior para indicar que letra debe obtener un acelerador generado. Por ejemplo, usando &File para el menú resultaría en un acelerador generado Alt-F que abre el menú asociado. El carácter indicado en la etiqueta del botón entonces aparecerá subrayado, y el carácter & no se mostrará en la etiqueta del botón.

Para poder saltar el carácter & en el nombre de un objeto, usa un & procedural. Por ejemplo, &&Archivo abrirá &Archivo en la etiqueta del botón.

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()

Devuelve Menu | null - El menú de aplicación, si se creó, o null en caso contrario.

[!NOTE] The returned Menu instance doesn't support dynamic addition or removal of menu items. Instance properties can still be dynamically modified.

Menu.sendActionToFirstResponder(action) macOS

• action string

Envía la action al primer respondedor de la aplicación. Esto es usado para emular los comportamientos del menú macOS por defecto. 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)

• plantilla (MenuItemConstructorOptions | MenuItem)[]

Returns Menu

Generally, the template is an array of options for constructing a MenuItem. The usage can be referenced above.

Usted puede además adjuntar otros campos al elemento del template y se convierten en propiedades de los items del menú construido.

Métodos de Instancia

El objetomenu tiene los siguientes métodos de instancia:

menu.popup([options])

• options Object (opcional)
  • window BaseWindow (optional) - Default is the focused window.
  • frame WebFrameMain (optional) - Provide the relevant frame if you want certain OS-level features such as Writing Tools on macOS to function correctly. Typically, this should be params.frame from the context-menu event on a WebContents, or the focusedFrame property of a WebContents.
  • x número (opcional) - Default es la posición actual del cursor. Debe ser declarado si y es declarado.
  • y número (opcional) - Default es la posición actual del cursor. Debe ser declarado si x es declarado.
  • positioningItem número (opcional) macOS - El índice del elemento del menú que debe ser posicionado debajo del cursor en las coordenadas específicas. El valor predeterminado es -1.
  • sourceType string (optional) Windows Linux - This should map to the menuSourceType provided by the context-menu event. It is not recommended to set this value manually, only provide values you receive from other APIs or leave it undefined. Puede ser none, mouse, keyboard, touch, touchMenu, longPress, longTap, touchHandle, stylus, adjustSelection, o adjustSelectionReset.
  • callback Function (opcional) - Llamada cuando se cierra el menu.

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

Anexa el menuItem al menú.

menu.getMenuItemById(id)

• id string

Devuelve MenuItem | null el item con el id especificado

menu.insert(pos, menuItem)

• pos Entero
• menuItem MenuItem

Inserta el menuItem en la posición pos del menú.

Eventos de Instancia

Objetos creados con new Menu o retornados por Menu.buildFromTemplate emiten los siguientes eventos:

[!NOTE] Some events are only available on specific operating systems and are labeled as such.

Evento: 'menu-will-show'

Devuelve:

• event

Emitido cuando se llama a menu.popup().

Evento: 'menu-will-close'

Devuelve:

• event

Se emite cuando una ventana emergente se cierra manualmente o con menu.closePopup().

Propiedades de la instancia

Los objetos menu también tienen las siguientes propiedades:

menu.items

Un arreglo MenuItem[] contiene los elementos del menú.

Each Menu consists of multiple MenuItems and each MenuItem can have a submenu.

Ejemplos

Un ejemplo de creación de una menú de la aplicación con el API simple template:

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 renderer process, envía la información requerida al main process usando IPC y haz que main process muestre el menú en nombre del renderer.

A continuación un ejemplo de mostrar un menú cuando el usuario pulsa 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({ window: BrowserWindow.fromWebContents(event.sender) })
})

Notas sobre el menú de la aplicación en 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.

Menús Estándar

On macOS there are many system-defined standard menus, like the Services and Windows menus. Para hacer que el menú sea un menú estándar, se debe configurar el role del menú a uno de los siguientes y Electron los reconocerá y convertirá en menús estándares:

• window
• help
• services

Acciones estándares de los elementos del menú

macOS ha proporcionado acciones estándares para algunos elementos del menú, como About xxx, Hide xxx, y Hide Others. Para establecer la acción de un elemento de menú en una acción estándar, debe establecer el atributo función del elemento del menú.

Nombre del menú principal

En macOS, la etiqueta del primer elemento del menú de la aplicación siempre es su nombre de aplicación, sin importar la etiqueta que establezca. Para cambiarlo, modifique el archivo Info.plist file del conjunto de la app. See About Information Property List Files for more information.

Configurando el menú para una ventana específica del navegador (Linux Windows)

The setMenu method of browser windows can set the menu of certain browser windows.

La posición del elemento del menú

Tú puedes hacer uso de before, after, beforeGroupContaining, afterGroupContaining y id para controlar como el elemento sera colocado cuando un menu sea construido con Menu.buildFromTemplate.

• before - Inserts this item before the item with the specified id. Si el ítem referenciado no existe se insertara al final del menú. Ademas implica que el ítem del menú en cuestión debe ser colocado en el mismo "grupo" como el ítem.
• after - Inserts this item after the item with the specified id. Si el ítem referenciado no existe se insertara al final del menú. Ademas implica que el ítem del menú en cuestión debe ser colocado en el mismo "grupo" como el ítem.
• 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.

Por defecto, 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

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