Также на Windows и Linux, вы можете использовать & в имени пункта верхнего уровня, чтобы указать, какая буква должна получить генерируемую комбинацию клавиш. Например, используя &File для меню "Файл", вы получите генерируемую Alt-F комбинацию клавиш, которая откроет соответствующее меню. Указанный символ в метке кнопки будет подчеркнут, а & символ не будет отображаться на метке кнопки.

Чтобы экранировать символ & в имени пункта, добавьте &. Например, &&File приведет к отображению &File на метке кнопки.

Передача null отключит стандартное меню. На Windows и Linux это также скроет строку меню из окна.

Примечание: Стандартное меню будет автоматически создано, если приложение его не установит. Оно содержит стандартные пункты, такие как File, Edit, View, Window и Help.

`Menu.getApplicationMenu()`

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

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

`Menu.sendActionToFirstResponder(action)` macOS

action строка

Отправляет action первому обработчику приложения. Это используется для эмуляции стандартного поведения меню macOS. Обычно вы будете использовать свойство role элемента MenuItem.

Для получения дополнительной информации о системной обработке событий macOS, см. Руководство по обработке событий Cocoa для macOS.

`Menu.buildFromTemplate(template)`

template (MenuItemConstructorOptions | MenuItem)[]

Возвращает Menu

Как правило, template — это массив options для построения MenuItem. Пример использования приведен выше.

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

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

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

`menu.popup([options])`

options Объект (необязательно)
- window BrowserWindow (необязательно) - По умолчанию активное окно.
- x число (необязательно) - По умолчанию текущие координаты курсора мыши. Должно быть указано, если указано y.
- y число (необязательно) - По умолчанию текущие координаты курсора мыши. Должно быть указано, если указано x.
- positioningItem число (необязательно) macOS - Индекс пункта меню, под которым должен отобразиться курсор мыши в указанных координатах. По умолчанию -1.
- callback Функция (необязательно) - Вызывается при закрытии меню.

Отображает это меню как контекстное меню в BrowserWindow.

`menu.closePopup([browserWindow])`

browserWindow BrowserWindow (необязательно) - По умолчанию активное окно.

Закрывает контекстное меню в browserWindow.

`menu.append(menuItem)`

menuItem MenuItem

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

`menu.getMenuItemById(id)`

id строка

Возвращает MenuItem | null пункт с указанным id

`menu.insert(pos, menuItem)`

pos Целое число
menuItem MenuItem

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

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

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

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

Возвращает:

event Событие

Генерируется при вызове menu.popup().

Возвращает:

event Событие

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

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

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

`menu.items`

Массив MenuItem[] , содержащий пункты меню.

Каждый Menu состоит из нескольких MenuItem и каждый MenuItem может иметь подменю.

Примеры

Пример создания меню приложения с помощью простого 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)

Процесс отрисовки

Для создания меню, инициированного процессом отрисовки, отправьте необходимую информацию в основной процесс с помощью IPC, и пусть основной процесс отобразит меню от имени процесса отрисовки.

Ниже приведен пример отображения меню, когда пользователь щелкает правой кнопкой мыши по странице:

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

У macOS совершенно другой стиль меню приложения, чем у Windows и Linux. Вот несколько примечаний о том, как сделать меню вашего приложения более похожим на родное.

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

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

window
help
services

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

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

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

Метод setMenu окон браузера позволяет настраивать меню определённых окон браузера.

Для управления расположением пункта при построении меню с помощью Menu.buildFromTemplate, можно использовать before, after, beforeGroupContaining, afterGroupContaining и id.

before - Вставляет этот пункт перед пунктом с указанной меткой. Если эта метка не найдена, пункт будет вставлен в конец меню. Также подразумевает, что данный пункт меню должен быть размещён в той же «группе», что и соответствующий пункт.
after - Вставляет этот пункт после пункта с указанной меткой. Если эта метка не найдена, пункт будет вставлен в конец меню. Также подразумевает, что данный пункт меню должен быть размещён в той же «группе», что и соответствующий пункт.
beforeGroupContaining - Предоставляет способ для отдельного контекстного меню объявлять расположение своей содержащей группы перед содержащей группой пункта с указанной меткой.
afterGroupContaining - Предоставляет способ для отдельного контекстного меню объявлять расположение своей содержащей группы после содержащей группы пункта с указанной меткой.

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

Примеры

Шаблон:

[
  { 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

Меню

Класс: Меню

`new Menu()`

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

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

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

`menu.popup([options])`

`menu.closePopup([browserWindow])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

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

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

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

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

`menu.items`

Примеры

Процесс отрисовки

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

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

Стандартные действия пункта меню

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

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

Позиция пункта меню

Примеры

Меню

Класс: Меню​

new Menu()​

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

Menu.setApplicationMenu(menu)​

Menu.getApplicationMenu()​

Menu.sendActionToFirstResponder(action) macOS​

Menu.buildFromTemplate(template)​

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

menu.popup([options])​

menu.closePopup([browserWindow])​

menu.append(menuItem)​

menu.getMenuItemById(id)​

menu.insert(pos, menuItem)​

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

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

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

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

menu.items​

Примеры​

Процесс отрисовки​

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

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

Стандартные действия пункта меню​

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

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

Позиция пункта меню​

Примеры​

Класс: Меню

`new Menu()`

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

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

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

`menu.popup([options])`

`menu.closePopup([browserWindow])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

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

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

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

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

`menu.items`

Примеры

Процесс отрисовки

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

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

Стандартные действия пункта меню

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

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

Позиция пункта меню

Примеры