Также на Windows и Linux, Вы можете использовать & в названии подменю верхнего списка, чтобы указать, какая буква должна получить сгенерированный акселератор( Accelerator ). Для примера, использование &File для меню файла в результате сгенерирует акселератор( Accelerator ) Alt-F, который открывает соответствующее меню. 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.

Примечание: Меню по умолчанию будет создано автоматически, если приложение не установит его. Он содержит стандартные элементы, такие как Файл, Редактировать, Вид, Окно и Помощь.

`Menu.getApplicationMenu()`

Возвращает Menu | null - меню приложения, если значение задано, в противном случае null.

Примечание: Возвращенный экземпляр Menu не поддерживает динамическое добавление или удаление пунктов меню. Параметры экземпляра все ещё могут быть динамически изменены.

`Menu.sendActionToFirstResponder(action)` macOS

action string

Посылает action первому ответчику приложения. Это используется для эмуляции поведения меню macOS. Usually you would use the role property of a MenuItem.

Для дополнительной информации по нативным действиям в macOS смотрите macOS Cocoa Event Handling Guide.

`Menu.buildFromTemplate(template)`

template (MenuItemConstructorOptions | MenuItem)[]

Возвращает Menu

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

Вы также можете прикрепить другие поля к элементу template и они станут свойствами элементов созданного меню.

Методы экземпляра

Объект меню имеет следующие методы экземпляра:

`menu.popup([options])`

options Object (опционально)
- 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 number (optional) - Default is the current mouse cursor position. Must be declared if y is declared.
- y number (optional) - Default is the current mouse cursor position. Must be declared if x 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 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. Can be none, mouse, keyboard, touch, touchMenu, longPress, longTap, touchHandle, stylus, adjustSelection, or adjustSelectionReset.
- callback Функция (опционально) - вызывается, когда меню закрыто.

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

Добавляет menuItem в меню.

`menu.getMenuItemById(id)`

id string

Возвращает элемент MenuItem с указанным id

`menu.insert(pos, menuItem)`

port Integer
menuItem MenuItem

Вставляет menuItem в меню на позицию pos.

События экземпляра

Объекты созданные с помощью new Menu или возвращенные из Menu.buildFromTemplate вызывают следующие события:

Примечание: Некоторые методы доступны только в определенных операционных системах и помечены как таковые.

Возвращает:

Событие типа event

Вызывается при вызове menu.popup().

Возвращает:

Событие типа event

Вызывается, когда всплывающее окно закрывается вручную или с помощью menu.closePopup().

Свойства экземпляра

Объекты menu также имеют следующие свойства:

`menu.items`

Массив MenuItem[] содержит элементы меню.

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

Примеры

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)

Графический процесс

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

Замечания о меню приложения в 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.

Стандартные меню

На macOS есть много стандратных системных меню, таких как Службы и Окно. Чтобы сделать меню стандартным меню, Вы должны установить значение role у меню в одно из следующих, а Electron распознает их и сделает их стандартным меню:

window
help
services

Действия элементов стандартного меню

macOS представляет стандартные действия для некоторых элементов меню, таких как About xxx, Hide xxx и Hide Others. Чтобы установить действие элемента меню на стандартное действие, Вы должны установить атрибут role элемента меню.

Имя главного меню

На macOS название первого элемента меню приложения - всегда название Вашего приложения, независимо от того, какое название элемента Вы установили. Чтобы изменить его, измените файл Info.plist Вашей сборки приложения. См. О информации свойств списка файлов для большей информации.

Настройка меню для конкретного окна браузера (Linux Windows)

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

Позиция элемента меню

Вы можете использовать before, after, beforeGroupContaining, afterGroupContaining и id, чтобы контролировать то, как элементы будут размещены, при создании меню с помощью Menu.buildFromTemplate.

before - Inserts this item before the item with the specified id. Если ссылаемый элемент не существует, тогда элемент будет вставлен в конец меню. Кроме того, подразумевается, что рассматриваемый элемент меню размещен в той же "группе", что и сам элемент.
after - Inserts this item after the item with the specified id. Если ссылаемый элемент не существует, тогда элемент будет вставлен в конец меню. Кроме того, подразумевается, что рассматриваемый элемент меню размещен в той же "группе", что и сам элемент.
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.

По умолчанию, элементы будут вставлены в том порядке, в котором они существуют в шаблоне, если не используется ни один из указанных ключевых слов позиционирования.

Примеры

Шаблон:

[
  { id: '1', label: 'one' },
  { id: '2', label: 'two' },
  { id: '3', label: 'three' },
  { id: '4', label: 'four' }
]

Меню:

- 1
- 2
- 3
- 4

Шаблон:

[
  { id: '1', label: 'one' },
  { type: 'separator' },
  { id: '3', label: 'three', beforeGroupContaining: ['1'] },
  { id: '4', label: 'four', afterGroupContaining: ['2'] },
  { type: 'separator' },
  { id: '2', label: 'two' }
]

Меню:

- 3
- 4
- ---
- 1
- ---
- 2

Шаблон:

[
  { id: '1', label: 'one', after: ['3'] },
  { id: '2', label: 'two', before: ['1'] },
  { id: '3', label: 'three' }
]

Меню:

- ---
- 3
- 2
- 1

Menu

Класс: Menu

`new Menu()`

Статические методы

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

Методы экземпляра

`menu.popup([options])`

`menu.closePopup([window])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

События экземпляра

Событие: 'menu-will-show'

Событие: 'menu-will-close'

Свойства экземпляра

`menu.items`

Примеры

Графический процесс

Замечания о меню приложения в macOS

Стандартные меню

Действия элементов стандартного меню

Имя главного меню

Настройка меню для конкретного окна браузера (Linux Windows)

Позиция элемента меню

Примеры

Класс: Menu​

new Menu()​

Статические методы​

Menu.setApplicationMenu(menu)​

Menu.getApplicationMenu()​

Menu.sendActionToFirstResponder(action) macOS​

Menu.buildFromTemplate(template)​

Методы экземпляра​

menu.popup([options])​

menu.closePopup([window])​

menu.append(menuItem)​

menu.getMenuItemById(id)​

menu.insert(pos, menuItem)​

События экземпляра​

Событие: 'menu-will-show'​

Событие: 'menu-will-close'​

Свойства экземпляра​

menu.items​

Примеры​

Графический процесс​

Замечания о меню приложения в macOS​

Стандартные меню​

Действия элементов стандартного меню​

Имя главного меню​

Настройка меню для конкретного окна браузера (Linux Windows)​

Позиция элемента меню​

Примеры​

Класс: Menu

`new Menu()`

Статические методы

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

Методы экземпляра

`menu.popup([options])`

`menu.closePopup([window])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

События экземпляра

Событие: 'menu-will-show'

Событие: 'menu-will-close'

Свойства экземпляра

`menu.items`

Примеры

Графический процесс

Замечания о меню приложения в macOS

Стандартные меню

Действия элементов стандартного меню

Имя главного меню

Настройка меню для конкретного окна браузера (Linux Windows)

Позиция элемента меню

Примеры