Entfernen Sie die Menüleiste aus der Electron-App

104

Wie entferne ich diese Menüleiste aus meinen Elektronen-Apps:

Menüleiste

Außerdem heißt es "Hallo Welt" (liegt das daran, dass ich vorgefertigte Elektronen heruntergeladen habe und sie verschwinden, sobald ich die Anwendung verpackt habe?). Ich habe diese nicht in den HTML-Code codiert, daher weiß ich nicht, wie ich sie herausholen soll! -

Sean Letendre
quelle

Antworten:

146

Sie können Ihr Fenster verwenden w.setMenu(null)oder festlegen frame: false(dies entfernt auch Schaltflächen zum Schließen, Minimieren und Maximieren von Optionen). Siehe setMenu () oder BrowserWindow () . Überprüfen Sie auch diesen Thread


Electron hat jetzt win.removeMenu()( in Version 5.0.0 hinzugefügt) die Möglichkeit , Anwendungsmenüs zu entfernen, anstatt sie zu verwenden win.setMenu(null).


Electron 7.1.x scheint einen Fehler zu haben, win.removeMenu()der nicht funktioniert. Die einzige Problemumgehung ist die VerwendungMenu.setApplicationMenu(null)

Tony Vincent
quelle
4
frame: falsehabe es für mich getan.
Mwilson
5
fwiw removeMenu()ist nur Linux & Windows
Frühling
Was ist mit Fenstern, die von window.open () in einem bereits geöffneten Fenster mit einem Menü geöffnet wurden?
Michael
4
Electron 7.1.1 hat ein Problem, wo setMenuund removeMenunicht mehr funktionieren Link
P Fuster
1
Weder die Original- noch die Bearbeitungslösung funktionieren. Dies sollte nicht länger die Antwort sein.
Tyguy7
63

Benutze das:

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

Referenz: https://github.com/electron/electron/issues/1415

Ich habe es versucht mainWindow.setMenu(null), aber es hat nicht funktioniert.

iHad 169
quelle
2
Ich habe es mainWindow.setMenu(null)mit Elektron 5.0.2 versucht und es hat auch bei mir nicht funktioniert. Ich bin mir nicht sicher, warum ich Ratschläge sehe, es überall zu verwenden, und bin gewandert, wenn ich der einzige bin, der etwas falsch macht. Ihr Ratschlag zur Verwendung setMenuBarVisibilityentfernt zwar die Sichtbarkeit der Menüleiste, entfernt sie jedoch nicht vollständig. Es kann durch Drücken der AltTaste zurückgebracht werden.
Artium
1
FWIW: Mit Wahl 6.0.X weder .setMenu(null)noch .removeMenu()für mich gearbeitet. .setMenuBarVisibility(false)Entfernt die Menüleiste und die AltTaste funktioniert nur, wenn sie ausgeführt .setAutoHideMenuBar(true)wird.
Bob Nadler
1
+1 funktionierte unter Arch Linux setMenu(null)nicht, aber setMenuBarVisibility(false)wie erwartet (die Leiste kann nicht durch Drücken der altTaste wie bei @Artium erwähnt zurückgesetzt werden).
Amir A. Shabani
Dies ist die Lösung, die für mich funktioniert hat. Die Antwort, die als richtig markiert ist, funktioniert nicht unter Ubuntu 18.04, Electron v6.0.9
Christoffer
Toll! Ich brauchte eine einfache Möglichkeit, Tastaturkürzel einzuschließen, ohne die Menüleiste anzuzeigen. Danke vielmals!
Anis R.
26

Für Electron 7.1.1 können Sie Folgendes verwenden:

const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(false)
Polyvios P.
quelle
6
Update bearbeiten für mich: Menu.setApplicationMenu(null)gearbeitet in 7.1.2Andere Lösungen haben bei mir nicht funktioniert!
TessavWalstijn
1
Es funktioniert auch unter 7.1.4. Bitte aktualisieren Sie die richtige Antwort, um sicherzustellen, dass jeder mit diesem Problem die Lösung erreichen kann.
Emilio Numazaki
Funktioniert für mich in Elektron 7.1.6
Iuninefrendor
1
@OP - Willkommen bei Stack Overflow und vielen Dank für die tolle Antwort! Ein Hinweis - Bitte seien Sie vorsichtig, wenn Sie Anführungszeichen aus anderen Programmen wie MS Word kopieren und einfügen. Formatierte Anführungszeichen wie "Elektron" sind in den meisten Fällen nicht dasselbe wie unformatierte Anführungszeichen wie "Elektron".
Sfarbota
1
Funktioniert für mich in Elektron 7.19 Dies sollte definitiv als die richtige Antwort aktualisiert werden
Darkrender
9

Wenn Sie Ihre App verpacken, wird das Standardmenü nicht mehr angezeigt. Wenn Sie dies während der Entwicklung setMenu(null)stört, können Sie das von @TonyVincent vorgeschlagene Browserfenster aufrufen.

Vadim Macagon
quelle
Vielen Dank, dass Sie erwähnt haben, dass beim Packen der App das Standardmenü entfernt wird. Ich habe mich über diesen speziellen Punkt gewundert.
Raddevus
9

Ab 7.0.0 funktionieren die meisten der oben genannten Lösungen nicht mehr. BrowserWindow.setMenu()wurde ersetzt durch Menu.setApplicationMenu(), wodurch nun das Menü in allen Fenstern geändert wird. setMenu(), removeMenu()nichts mehr tun, die übrigens noch in den Dokumenten erwähnt werden.

setAutoHideMenuBar()funktioniert immer noch, könnte aber ein Ärgernis sein, wenn Sie Alt als Hotkey-Modifikator verwenden möchten. Sobald das Menü sichtbar ist, müssen Sie vom Fenster weg klicken (loser Fokus), um das Menü wieder auszublenden.

Wenn Ihre Anwendung mehr als ein Fenster hat, können Sie Menüs nicht für jedes Fenster separat festlegen / entfernen. Die einzige Möglichkeit, ein Menü zu entfernen, besteht in der Verwendung des rahmenlosen Fensteransatzes. Das ist das, was ich in meiner aktuellen Bewerbung möchte, aber nicht in allen Fällen eine gute Lösung.

Paul Sorensen
quelle
Vielen Dank, dies ist das einzige, was seit 7.0 funktioniert! Wird dies in den Dokumenten / Änderungsprotokollen / usw. erwähnt?
Rvighne
Im Link zum Github-Projekt ist ein Problem offen . Ich weiß nicht, ob es sich um eine geplante Abwertung oder einen Fehler handelte.
P Fuster
9

Das Menü kann ausgeblendet oder automatisch ausgeblendet werden (wie in Slack oder VS Code - Sie können Alt drücken, um das Menü ein- oder auszublenden ).

Relevante Methoden:

---- win.setMenu (Menü) - Legt das Menü als Menüleiste des Fensters fest. Wenn Sie es auf Null setzen, wird die Menüleiste entfernt. ( Dadurch wird das Menü vollständig entfernt. )

mainWindow.setMenu(null)


---- win.setAutoHideMenuBar (hide) - Legt fest, ob sich die Fenstermenüleiste automatisch ausblenden soll. Nach der Einstellung der Menüleiste wird nur
zeigen
, wenn Benutzer drücken die einzelne Alt - Taste .

mainWindow.setAutoHideMenuBar(true)

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

Es gibt auch die Methode zum Erstellen eines rahmenlosen Fensters, wie unten gezeigt:

(kein Schließen-Knopf, nichts. Kann sein, was wir wollen (besseres 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

Bearbeiten: (neu)

win.removeMenu() Linux Windows Entfernen Sie die Menüleiste des Fensters.

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

Win.removeMenu () hinzugefügt, um Anwendungsmenüs zu entfernen, anstatt win.setMenu (null) zu verwenden.

Das wird ab v5 wie folgt hinzugefügt:

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

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

Electron v7 Bug

Verwenden Sie für Electron 7.1.1 Menu.setApplicationMenuanstelle vonwin.removeMenu()

gemäß diesem Thread:
https://github.com/electron/electron/issues/16521

Und der große Hinweis ist: Sie müssen es aufrufen, bevor Sie das BrowserWindow erstellen ! Oder es wird nicht funktionieren!

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

Menu.setApplicationMenu(null);

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

UPDATE (Festlegen von autoHideMenuBar für die BrowserWindow-Konstruktion)

Wie von @kcpr Kommentar! Wir können die Eigenschaft und viele auf den Konstruktor setzen

Das ist jetzt auf der neuesten stabilen Version von Electron verfügbar, nämlich 8.3!
Aber auch in alten Versionen habe ich nach v1, v2, v3, v4 gesucht!
Es ist in allen Versionen da!

Gemäß diesem Link
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

Und für die v8.3
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions

Der Dokumentlink
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

Aus dem Dokument für die Option:

autoHideMenuBar Boolean (optional) - Blendet die Menüleiste automatisch aus, sofern nicht die Alt-Taste gedrückt wird. Standard ist falsch.

Hier ein Ausschnitt zur Veranschaulichung:


let browserWindow = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true // <<< here
})
Mohamed Allal
quelle
1
setAutoHideMenuBar ist veraltet
Mister SirCode
Die Antwort von Edmar unten ist eine bessere Version, der neueste Code zum automatischen Ausblenden des Menüs
Mister SirCode
1
In Electron 8.2.5 (ich vermute, dass auch in früheren Versionen) kann definiert werden, dass die Menüleiste im BrowserWindowKonstruktor automatisch ausgeblendet werden soll, wie folgt : new BrowserWindow({autoHideMenuBar: true}). Und übrigens, danke für diese Antwort. Es scheint mir wahrscheinlich die vollständigste zu sein (vorausgesetzt, die Methoden existieren noch und sind nicht veraltet).
18.
@kcpr Danke für deine Antwort! Ich habe die Antwort aktualisiert, um dies widerzuspiegeln!
Mohamed Allal
@ MohamedAllal, cool! Vielen Dank, ich bin froh, dass Sie meinen Kommentar für nützlich halten. Und danke auch für die zusätzliche Forschung, die Sie durchgeführt haben, und die Ergebnisse, die Sie geteilt haben.
kcpr
6
@"electron": "^7.1.1" : 

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

Arbeiten wie erwartet ohne Menü im Browser.

Rachuri
quelle
(Elektron) 'setAutoHideMenuBar Funktion' ist veraltet und wird entfernt. Bitte verwenden Sie stattdessen die Eigenschaft 'autoHideMenuBar'. @ "Elektron": "^ 7.1.1": mainWindow = neues BrowserWindow ({Höhe: 500, Breite: 800}); mainWindow.autoHideMenuBar = true;
Rachuri
3

Nach der Antwort auf dieses Problem müssen Sie anrufen, Menu.setApplicationMenu(null) bevor das Fenster erstellt wird

Kidoncio
quelle
Hey, willkommen bei Stack Overflow! Links zu anderen Antworten eignen sich eher als Kommentare als als Antworten. Dies liegt daran, dass Sie die Antwort in der verknüpften Frage nicht auf das spezifische Szenario dieses Benutzers anwenden.
David Chopin
2

Vor dieser Zeile bei main.js:

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

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

Diese Lösungen haben Fehler. Wenn Sie die unten aufgeführten Lösungen verwenden, hat Windows eine Verzögerung beim Schließen.

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

Ich habe unten eine Lösung verwendet. Das ist jetzt besser.

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