Supprimer la barre de menu de l'application Electron

Question

Comment supprimer cette barre de menu de mes applications électroniques ?

Il dit aussi "Hello World" (est-ce parce que j'ai téléchargé electron pré-construit, et cela disparaîtra une fois que j'aurai empaqueté l'application ?) Je n'ai pas codé ces éléments dans le code html, donc je ne sais pas comment les faire disparaître !

Answer 1

Vous pouvez utiliser w.setMenu(null) ou mettre frame: false (cela supprime également les boutons pour les options de fermeture, de minimisation et de maximisation) sur votre fenêtre. Voir setMenu() o BrowserWindow() . Vérifiez également ceci rosca

---

Electron a maintenant win.removeMenu() ( ajouté dans la v5.0.0 ), pour supprimer les menus d'application au lieu d'utiliser win.setMenu(null) .

---

Electron 7.1.x semble avoir un bug où win.removeMenu() ne fonctionne pas. La seule solution consiste à utiliser Menu.setApplicationMenu(null) Cependant, cela désactivera tous les raccourcis de menu tels que F11 pour basculer en mode plein écran, etc.

---

Dans les nouvelles versions d'Electron, vous pouvez paramétrer autoHideMenuBar: true pendant la création de browserWindow, en appuyant sur Alt affichera à nouveau la barre de menu.

const mainWindow = new BrowserWindow({
  autoHideMenuBar: true,
})

Answer 2

Pour Electron 7.1.1, vous pouvez utiliser ceci :

const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(false)

Answer 3

Le menu peut être caché o auto-caché (comme dans Slack o Code VS - vous pouvez appuyez sur Alt pour afficher/masquer le menu).

Méthodes pertinentes :

---- win.setMenu(menu) - Définit le menu comme la barre de menu de la fenêtre, Si vous lui attribuez la valeur null, la barre de menu sera supprimée ( Cela supprimera complètement le menu )

mainWindow.setMenu(null)

---- win.setAutoHideMenuBar(hide) - Indique si la barre de menu de la fenêtre doit se cacher automatiquement. Une fois fixé la barre de menu ne fera que
montrer lorsque les utilisateurs presse l'unique Touche Alt .

mainWindow.setAutoHideMenuBar(true)

Source : https://github.com/Automattic/simplenote-electron/issues/293

Il existe également une méthode pour fabriquer une fenêtre sans cadre, comme indiqué ci-dessous :

(pas de bouton de fermeture, rien du tout. Peut être ce que nous voulons (meilleure conception))

const { BrowserWindow } = require('electron')
let win = new BrowserWindow({ width: 800, height: 600, frame: false })
win.show()

https://electronjs.org/docs/api/browser-window#winremovemenu-linux-Windows

doc : https://electronjs.org/docs/api/frameless-window

Edit : (nouveau)

win.removeMenu() Linux Windows Supprimez la barre de menu de la fenêtre.

https://electronjs.org/docs/api/browser-window#winremovemenu-linux-Windows

Ajout de win.removeMenu() pour supprimer les menus des applications au lieu d'utiliser win.setMenu(null)

C'est ajouté à partir de la v5 comme indiqué :

https://github.com/electron/electron/pull/16570

https://github.com/electron/electron/pull/16657

Bug d'Electron v7

Pour Electron 7.1.1, utilisez Menu.setApplicationMenu au lieu de win.removeMenu()

conformément à ce fil de discussion :
https://github.com/electron/electron/issues/16521

Et la grande note est : vous devez l'appeler avant de créer la BrowserWindow ! Sinon, cela ne fonctionnera pas !

const {app, BrowserWindow, Menu} = require('electron')

Menu.setApplicationMenu(null);

const browserWindow = new BrowserWindow({/*...*/});

UPDATE (Définition de l'autoHideMenuBar lors de la construction de BrowserWindow)

Comme par le commentaire de @kcpr ! Nous pouvons définir la propriété et beaucoup sur le constructeur

C'est disponible sur la dernière version stable d'electron qui est maintenant la 8.3 !
Mais aussi dans les anciennes versions j'ai vérifié pour v1, v2, v3, v4 !
Il est présent dans toutes les versions !

Selon ce lien
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

Et pour la v8.3
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions

Le lien vers le document
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

A partir du doc de l'option :

autoHideMenuBar Booléen (facultatif) - Masque automatiquement la barre de menu si la touche Alt n'est pas enfoncée. La valeur par défaut est false.

Voici un extrait pour l'illustrer :

let browserWindow = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true // <<< here
})

Answer 4

Depuis la version 7.0.0, la plupart des solutions ci-dessus ne fonctionnent plus. BrowserWindow.setMenu() a été remplacé par Menu.setApplicationMenu() qui modifie désormais le menu sur tous les Windows. setMenu() , removeMenu() ne font plus rien, qui d'ailleurs sont toujours mentionnés dans les docs.

setAutoHideMenuBar() fonctionne toujours, mais pourrait être une nuisance si vous prévoyez d'utiliser Alt comme modificateur de touche de raccourci. Une fois que le menu est visible, il faut cliquer hors de la fenêtre (perdre le focus) pour le masquer à nouveau.

Si votre application comporte plus d'une fenêtre, vous ne pouvez pas définir/supprimer les menus séparément sur chaque fenêtre. La seule façon de supprimer un menu est d'utiliser l'approche de la fenêtre sans cadre. C'est ce que je souhaite dans mon application actuelle, mais ce n'est pas une bonne solution dans tous les cas.

Answer 5

Lorsque vous empaqueterez votre application, le menu par défaut ne sera plus là. Si cela vous dérange pendant le développement, vous pouvez appeler setMenu(null) sur la fenêtre du navigateur comme suggéré par @TonyVincent.