Supprimer la barre de menus de l'application Electron

104

Comment supprimer cette barre de menus de mes applications électroniques:

barre de menu

Il dit aussi "Hello World" (est-ce parce que j'ai téléchargé électron pré-construit, et disparaîtra une fois que j'emballerai l'application?). Je ne les ai pas codés dans le html, donc je ne sais pas comment les sortir! -

Sean Letendre
la source

Réponses:

149

Vous pouvez utiliser w.setMenu(null)ou définir frame: false(cela supprime également les boutons pour fermer, réduire et agrandir les options) sur votre fenêtre. Voir setMenu () ou BrowserWindow () . Vérifiez également ce fil


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 bogue où win.removeMenu()ne fonctionne pas. La seule solution de contournement consiste à utiliserMenu.setApplicationMenu(null)

Tony Vincent
la source
4
frame: falsel'a fait pour moi.
mwilson
5
fwiw removeMenu()est Linux et Windows uniquement
printemps
qu'en est-il des fenêtres ouvertes par window.open () dans une fenêtre déjà ouverte ayant un menu?
Michael le
4
Electron 7.1.1 a un problème où setMenuet removeMenune fonctionne plus lien
P Fuster
1
Ni l'original ni les solutions d'édition ne fonctionnent. Cela ne devrait plus être la réponse.
Tyguy7
63

Utilisez ceci:

mainWindow = new BrowserWindow({width: 640, height: 360})
mainWindow.setMenuBarVisibility(false)

Référence: https://github.com/electron/electron/issues/1415

J'ai essayé mainWindow.setMenu(null), mais cela n'a pas fonctionné.

iHad 169
la source
2
J'ai essayé mainWindow.setMenu(null)avec l'électron 5.0.2 et cela n'a pas fonctionné pour moi aussi. Je ne sais pas pourquoi je vois conseiller de l'utiliser partout, et je me promenais si je suis le seul à faire quelque chose de mal. Votre conseil d'utilisation setMenuBarVisibility, bien que supprime la visibilité de la barre de menus, ne la supprime pas complètement. Il peut être ramené en appuyant sur la Alttouche.
Artium
1
FWIW: Avec Election 6.0.X ni .setMenu(null)ou a .removeMenu()fonctionné pour moi. .setMenuBarVisibility(false)supprime la barre de menus et la Alttouche ne fonctionne que si elle .setAutoHideMenuBar(true)est exécutée.
Bob Nadler
1
+1, dans Arch Linux, setMenu(null)n'a pas fonctionné, mais setMenuBarVisibility(false)fonctionne comme prévu (la barre ne peut pas être ramenée en appuyant sur la alttouche comme @Artium mentionné).
Amir A. Shabani le
C'est la solution qui a fonctionné pour moi. La réponse marquée correcte ne fonctionne pas sur Ubuntu 18.04, Electron v6.0.9
Christoffer
Génial! J'avais besoin d'un moyen simple d'inclure des raccourcis clavier sans afficher la barre de menus. Merci beaucoup!
Anis R.
26

Pour Electron 7.1.1, vous pouvez utiliser ceci:

const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(false)
Polyvios P
la source
6
Modifier la mise à jour pour moi: Menu.setApplicationMenu(null)travaillé dans 7.1.2D'autres solutions ne fonctionnaient pas pour moi!
TessavWalstijn
1
Cela fonctionne également sur 7.1.4. Veuillez mettre à jour la bonne réponse pour vous assurer que toutes les personnes confrontées à ce problème pourront trouver la solution.
Emilio Numazaki
Fonctionne pour moi en électron 7.1.6
Iuninefrendor
1
@OP - Bienvenue sur Stack Overflow et merci pour la bonne réponse! Une note - Soyez prudent lorsque vous copiez et collez des guillemets à partir d'autres programmes tels que MS Word. Les citations formatées comme «électron» ne sont pas les mêmes que les citations non formatées comme «électron» dans la plupart des cas.
sfarbota
1
Fonctionne pour moi en électron 7.19 Cela devrait certainement être mis à jour comme la bonne réponse
Darkrender
9

Lorsque vous empaquetez 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)la fenêtre du navigateur comme suggéré par @TonyVincent.

Vadim Macagon
la source
Merci de mentionner que l'empaquetage de l'application supprimera le menu par défaut. Je me posais des questions sur ce point précis.
raddevus
9

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 de toutes les fenêtres. setMenu(), removeMenu()ne faites plus rien, qui sont d'ailleurs toujours mentionnés dans la documentation.

setAutoHideMenuBar()fonctionne toujours, mais pourrait être une nuisance si vous prévoyez d'utiliser Alt comme modificateur de raccourci clavier. Une fois le menu visible, vous devez cliquer en dehors de la fenêtre (mise au point lâche) pour masquer à nouveau le menu.

Si votre application comporte plusieurs fenêtres, vous ne pouvez pas définir / supprimer des menus séparément dans 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.

Paul Sorensen
la source
Merci, c'est la seule chose qui fonctionne depuis la version 7.0! Y a-t-il une mention de cela dans les docs / changelogs / etc?
rvighne
Un problème est ouvert dans le lien du projet github . Je ne sais pas s'il s'agissait d'une obsolescence prévue ou d'un bug.
P Fuster
9

Le menu peut être masqué ou masqué automatiquement (comme dans Slack ou VS Code - vous pouvez appuyer sur Alt pour afficher / masquer le menu).

Méthodes pertinentes:

---- win.setMenu (menu) - Définit le menu comme la barre de menus de la fenêtre, le définir sur null supprimera la barre de menus. ( Cela supprimera complètement le menu )

mainWindow.setMenu(null)


---- win.setAutoHideMenuBar (hide) - Définit si la barre de menus de la fenêtre doit se cacher automatiquement. Une fois définie, la barre de menus ne
s'affiche que
lorsque les utilisateurs appuient sur la touche Alt unique .

mainWindow.setAutoHideMenuBar(true)

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

Il existe également la méthode pour créer une fenêtre sans cadre comme indiqué ci-dessous:

(pas de bouton de fermeture, rien. Peut être ce que nous voulons (meilleur design))

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 menus de la fenêtre.

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

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

Cela est ajouté à partir de la v5 selon:

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

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

Bogue Electron v7

Pour Electron 7.1.1, utilisez Menu.setApplicationMenuau lieu dewin.removeMenu()

selon ce fil:
https://github.com/electron/electron/issues/16521

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

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

Menu.setApplicationMenu(null);

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

UPDATE (Définition de autoHideMenuBar sur la construction BrowserWindow)

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

C'est disponible sur la dernière version stable d'électron maintenant qui est 8.3!
Mais aussi dans les anciennes versions, j'ai vérifié les v1, v2, v3, v4!
C'est là 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 doc
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

De la doc pour l'option:

autoHideMenuBar Boolean (facultatif) - Masque automatiquement la barre de menus à moins que la touche Alt ne soit 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
})
Mohamed Allal
la source
1
setAutoHideMenuBar est obsolète
Mister SirCode
La réponse d'Edmar ci-dessous est une meilleure version, dernier code pour masquer automatiquement le menu
Mister SirCode
1
Dans Electron 8.2.5 (Je soupçonne que aussi dans les versions précédentes) , il est possible de définir, que la barre de menu doit être caché automatiquement dans le BrowserWindowconstructeur comme ceci: new BrowserWindow({autoHideMenuBar: true}). Et, au fait, merci pour cette réponse. Elle me semble probablement la plus complète (en supposant que les méthodes existent toujours et ne sont pas obsolètes).
kcpr
@kcpr Merci pour votre réponse! J'ai mis à jour la réponse pour refléter cela!
Mohamed Allal
@MohamedAllal, cool! Merci, je suis content que vous considérez mon commentaire utile. Et merci aussi pour les recherches supplémentaires que vous avez faites et les résultats que vous avez partagés.
kcpr
6
@"electron": "^7.1.1" : 

mainWindow = new browserWindow({ height: 500, width: 800});
//mainWindow.setAutoHideMenuBar(true);
mainWindow.autoHideMenuBar = true;

Fonctionne comme prévu sans menu dans le navigateur.

Rachuri
la source
(electron) 'setAutoHideMenuBar function' est obsolète et sera supprimée. Veuillez utiliser à la place 'autoHideMenuBar property'. @ "electron": "^ 7.1.1": mainWindow = new browserWindow ({hauteur: 500, largeur: 800}); mainWindow.autoHideMenuBar = true;
Rachuri
3

Suite à la réponse de ce problème , vous devez appeler Menu.setApplicationMenu(null) avant la création de la fenêtre

Kidoncio
la source
Hé, bienvenue dans Stack Overflow! Les liens vers d'autres réponses sont mieux adaptés comme commentaires que comme réponses. C'est parce que vous n'appliquez pas réellement la réponse de la question liée au scénario spécifique de cet utilisateur.
David Chopin
2

Avant cette ligne sur main.js:

mainWindow = new BrowserWindow({width: 800, height: 900})

mainWindow.setMenu(null) //this will r menu bar
Edmar Pereira
la source
0

Ces solutions ont un bug. Lorsque vous utilisez des solutions ci-dessous, les fenêtres ont un retard à la fermeture.

Menu.setApplicationMenu(null),
&&
const updateErrorWindow = new BrowserWindow({autoHideMenuBar: true});

J'ai utilisé la solution ci-dessous. C'est mieux pour le moment.

const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
Abdurrahman Yıldırım
la source