Menu

Classe : Menu

Crée des menus d'applications natifs et des menus contextuels.

Processus : Main

new Menu()

Crée un nouveau menu.

Méthodes statiques

La classe Menu dispose des méthodes statiques suivantes :

Menu.setApplicationMenu(menu)

• menu Menu | null

Définit menu comme menu d'application sur macOS. Sous Windows et Linux, menu sera défini comme menu principal de chaque fenêtre.

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: Le menu par défaut sera créé automatiquement si l'application ne le définit pas. Il contient des éléments standard tels que Fichier, Modifier, Voir, Window et Aide.

Menu.getApplicationMenu()

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

Remarque : L'instance retournée de Menu , ne supporte pas l'ajout ou la suppression dynamique d’éléments de menu. Les propriétés de l’instance peuvent toujours être modifiées dynamiquement.

Menu.sendActionToFirstResponder(action) macOS

• action string

Envoie l'action au premier répondant de l'application. Ceci est utilisé pour émuler les comportements du menu de macOS par défaut. Habituellement, vous utiliseriez la propriété rôle d'un MenuItem.

Voir le Guide de gestion des événements Cocoa de macOS pour plus d'informations sur les actions natives de macOS.

Menu.buildFromTemplate(template)

• template (MenuItemConstructorOptions | MenuItem)[]

Retourne Menu

Généralement, le paramètre template est un tableau d' options pour construire un 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 dispose des méthodes d’instance suivantes :

menu.popup([options])

• options Object (facultatif)
  • window BrowserWindow (facultatif) - Par défaut c'est la fenêtre ayant le focus.
  • 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 (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. 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 BrowserWindow.

menu.closePopup([browserWindow])

• browserWindow BrowserWindow (facultatif) - La fenêtre focalisée est par défaut.

Ferme le menu contextuel dans la browserWindow.

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 :

Remarque : Certains événements sont seulement disponibles sur des systèmes d'exploitation spécifiques et sont étiquetés comme tels.

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

Retourne :

• event Event

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

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

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.

Chaque Menu consiste en plusieurs MenuItems et chaque MenuItem peut avoir un sous-menu.

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

Notes sur le menu d'application macOS

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

Sur macOS, il existe de nombreux menus standards prédéfinis par le système, comme les Services et Windows. 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

Actions des éléments de menu standard

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.

Nom du menu principal

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. Voir À propos des fichiers de la liste de propriétés d'information pour plus d'informations.

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

La setMenu méthode des fenêtres du navigateur peut définir le menu de certaines fenêtres de navigateur.

Position des éléments du menu

Vous pouvez utiliser before, after, beforeGroupContaining, afterGroupContaining et id pour contrôler la position des éléments lors de la construction d'un menu avec Menu.buildFromTemplate.

• before - Inserts this item before the item with the specified id. 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 - Inserts this item after the item with the specified id. 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.

Par défaut, les éléments seront insérés dans l'ordre dans lequel ils apparaissent dans le modèle (template), sauf si l'un des mots-clés de positionnement spécifiés est utilisé.

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