Sous Windows et Linux, vous pouvez également utiliser un & dans le nom de l'élément de niveau supérieur pour indiquer quelle lettre fournira un raccourci . Par exemple, l’utilisation de &File pour le menu Fichier entraînera la génération d’un raccourci Alt-F ouvrant le menu associé. Le caractère indiqué dans le label du bouton est alors souligné et le caractère & n’est pas affiché dans le bouton.

Afin d'échapper le caractère & dans un nom d'item, ajoutez lui d'abord &. Par exemple, &&File afficherait &File dans le bouton.

Le passage de null comme paramètre supprimera le menu par défaut. Sous Windows et Linux, cela a pour effet supplémentaire de supprimer la barre de menu de la fenêtre.

[!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()`

Retourne Menu | null - Le menu de l’application si défini, ou null, si non défini.

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

Envoie action au premier répondant de l'application. Ceci est utilisé pour émuler les comportements du menu de macOS par défaut. 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)`

template (MenuItemConstructorOptions | MenuItem)[]

Returns Menu

Generally, the template is an array of options for constructing a MenuItem. L'utilisation peut être référencée ci-dessus.

Vous pouvez également attacher d'autres champs à l'élément du template et ils deviendront des propriétés des éléments de menu construits.

Méthodes d’instance

L'objet menu a les méthodes d'instance suivantes:

`menu.popup([options])`

options Object (facultatif)
- 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 (facultatif) - C'est par défaut la position actuelle du curseur de la souris. Doit être déclaré si y est déclaré.
- x number (facultatif) - C'est par défaut la position actuelle du curseur de la souris. Doit être déclaré si x est déclaré.
- positioningItem number (facultatif) macOS - L'index de l'élément de menu à positionner sous le curseur de la souris aux coordonnées spécifiées. est. La valeur par défaut est -1.
- sourceType string (facultatif) Windows Linux - Ceci doit correspondre au menuSourceType fournie par l'événement context-menu. Il n'est pas recommandé de définir cette valeur manuellement, fournissez seulement les valeurs que vous recevez d'autres APIs ou laissez à undefined. Peut être une de ces valeurs none, mouse, keyboard, touch, touchMenu, longPress, longTap, touchHandle, stylus, adjustSelection, adjustSelectionReset.
- callback Fonction (facultatif) - Appelée lorsque le menu est fermé.

Fait apparaitre ce menu sous la forme d'un menu contextuel dans la BaseWindow.

`menu.closePopup([window])`

window BaseWindow (optional) - Default is the focused window.

Ferme le menu contextuel dans la window.

`menu.append(menuItem)`

menuItem MenuItem

Ajoute le menuItem au menu.

`menu.getMenuItemById(id)`

id string

Retourne MenuItem | null l'élément avec le id spécifié

`menu.insert(pos, menuItem)`

pos Integer
menuItem MenuItem

Insère le menuItem à la position pos du menu.

Événements d’instance

Les objets créés avec new Menu ou retournés par Menu.buildFromTemplate émettent les événements suivants :

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

Retourne :

event Event

Émis lorsque menu.popup() est appelé.

Retourne :

event Event

Émis lorsqu'un popup est fermé manuellement ou avec menu.closePopup().

Propriétés d'instance

Les objets menu dispossent également des propriétés suivantes :

`menu.items`

Un tableau MenuItem[] contenant les éléments du menu.

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

Exemples

Exemple de création du menu de l'application avec l'API de modèle 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)

Processus de rendu

Pour créer des menus initiés par le processus de rendu, envoyez les informations requises au processus principal à l’aide d’IPC et faites afficher le menu par le processus principal au nom du moteur de rendu.

Voici un exemple d'affichage d'un menu lorsque l'utilisateur clique avec le bouton droit sur la 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 a un style de menu d'application complètement différent de Windows et Linux. Voici quelques notes pour rendre le menu de votre application plus natif.

Menus Standards

On macOS there are many system-defined standard menus, like the Services and Windows menus. Pour faire de votre menu un menu standard, vous devez définir le rôle de votre menu comme l'un des rôles suivants pour qu'ainsi Electron les reconnaîsse et les transforme en menus standards :

window
help
services

macOS fournit des actions standard pour certains liens de menu, comme À propos de xxx, Cacher xxx, et Cacher les autres. Pour définir l'action d'un lien de menu à une action standard , vous devez définir l'attribut rôle de l'élément de menu.

Sur macOS, l'étiquette du premier élément du menu de l'application est toujours le nom de votre application, quel que soit le libellé que vous avez défini. Pour le modifier, modifiez le fichier Info.plist de votre pack d'applications. See About Information Property List Files for more information.

Menu sublabels, or subtitles, can be added to menu items using the sublabel option. Below is an example based on the renderer example above:

// main
ipcMain.on('show-context-menu', (event) => {
  const template = [
    {
      label: 'Menu Item 1',
      sublabel: 'Subtitle 1',
      click: () => { event.sender.send('context-menu-command', 'menu-item-1') }
    },
    { type: 'separator' },
    { label: 'Menu Item 2', sublabel: 'Subtitle 2', type: 'checkbox', checked: true }
  ]
  const menu = Menu.buildFromTemplate(template)
  menu.popup({ window: BrowserWindow.fromWebContents(event.sender) })
})

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

You can make use of before, after, beforeGroupContaining, afterGroupContaining and id to control how the item will be placed when building a menu with Menu.buildFromTemplate.

before - Insère cet élément avant l'élément dont l'id est spécifié. Si l'élément référencé n'existe pas, l'élément sera inséré à la fin du menu. Implique également que le lien de menu en question doit être placé dans le même « groupe » que l’élément.
after - Insère cet élément avant l'élément dont l'id est spécifié. Si l'élément référencé n'existe pas, l'élément sera inséré à la fin du menu. Implique également que l'élément à positionner le soit dans le même « groupe » que l’élément référencé.
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.

By default, items will be inserted in the order they exist in the template unless one of the specified positioning keywords is used.

Exemples

Template:

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

Menu:

- 1
- 2
- 3
- 4

Template:

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

Menu:

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

Template:

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

Menu:

- ---
- 3
- 2
- 1

Menu

Classe : Menu

`new Menu()`

Méthodes statiques

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

Méthodes d’instance

`menu.popup([options])`

`menu.closePopup([window])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

Événements d’instance

Événement : 'menu-will-show'

Événement : 'menu-will-close'

Propriétés d'instance

`menu.items`

Exemples

Processus de rendu

Notes sur le menu d'application macOS

Menus Standards

Actions des éléments de menu standard

Nom du menu principal

Menu Sublabels

Paramétrage du menu pour une BrowserWindow spécifique (Linux Windows)

Position des éléments du menu

Exemples

Classe : Menu​

new Menu()​

Méthodes statiques​

Menu.setApplicationMenu(menu)​

Menu.getApplicationMenu()​

Menu.sendActionToFirstResponder(action) macOS​

Menu.buildFromTemplate(template)​

Méthodes d’instance​

menu.popup([options])​

menu.closePopup([window])​

menu.append(menuItem)​

menu.getMenuItemById(id)​

menu.insert(pos, menuItem)​

Événements d’instance​

Événement : 'menu-will-show'​

Événement : 'menu-will-close'​

Propriétés d'instance​

menu.items​

Exemples​

Processus de rendu​

Notes sur le menu d'application macOS​

Menus Standards​

Actions des éléments de menu standard​

Nom du menu principal​

Menu Sublabels​

Paramétrage du menu pour une BrowserWindow spécifique (Linux Windows)​

Position des éléments du menu​

Exemples​

Classe : Menu

`new Menu()`

Méthodes statiques

`Menu.setApplicationMenu(menu)`

`Menu.getApplicationMenu()`

`Menu.sendActionToFirstResponder(action)` macOS

`Menu.buildFromTemplate(template)`

Méthodes d’instance

`menu.popup([options])`

`menu.closePopup([window])`

`menu.append(menuItem)`

`menu.getMenuItemById(id)`

`menu.insert(pos, menuItem)`

Événements d’instance

Événement : 'menu-will-show'

Événement : 'menu-will-close'

Propriétés d'instance

`menu.items`

Exemples

Processus de rendu

Notes sur le menu d'application macOS

Menus Standards

Actions des éléments de menu standard

Nom du menu principal

Menu Sublabels

Paramétrage du menu pour une BrowserWindow spécifique (Linux Windows)

Position des éléments du menu

Exemples