Electronアプリからメニューバーを削除する


104

電子アプリからこのメニューバーを削除するにはどうすればよいですか。

メニューバー

また、「Hello World」と表示されています(これは、ビルド済みのelectronをダウンロードしたため、アプリケーションをパッケージ化すると消えます)。これらをhtmlにコーディングしなかったので、それを取得する方法がわかりません!-

回答:


149

ウィンドウで使用w.setMenu(null)または設定できますframe: false(これにより、閉じる、最小化、最大化のオプションのボタンも削除されます)。setMenu()またはBrowserWindow()を参照してください。このスレッドも確認してください


Electronはwin.removeMenu()v5.0.0で追加)を使用する代わりにアプリケーションメニューを削除するようになりましたwin.setMenu(null)


Electron 7.1.xには、win.removeMenu()機能しないバグがあるようです。唯一の回避策は使用することですMenu.setApplicationMenu(null)


4
frame: false私のためにやった。
mwilson

5
fwiw removeMenu()はLinuxとWindowsのみです

メニューが既に開いているウィンドウでwindow.open()によって開かれたウィンドウではどうですか?
Michael

4
電子7.1.1は問題があるsetMenuremoveMenu、もはや働かないリンク
Pフステル

1
元のソリューションも編集ソリューションも機能しません。これはもはや答えではないはずです。
Tyguy7

63

これを使って:

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

リファレンス:https : //github.com/electron/electron/issues/1415

試しましたmainWindow.setMenu(null)が、うまくいきませんでした。


2
私はmainWindow.setMenu(null)エレクトロン5.0.2 を試してみましたが、私にとってもうまくいきませんでした。なぜ私がどこでもそれを使用するようにアドバイスを見て、私が何か間違って何かをしているのが私だけかどうか迷っていました。の使用に関するアドバイスはsetMenuBarVisibility、メニューバーの表示を削除しますが、完全には削除しません。Altキーを押すと元に戻すことができます。
Artium

1
FWIW:Election 6.0.Xでは、どちら.setMenu(null).removeMenu()機能しませんでした。.setMenuBarVisibility(false)メニューバーを削除し、Altキー.setAutoHideMenuBar(true)が実行されている場合にのみ機能します。
ボブ・ナドラー

1
Arch Linuxの+1 setMenu(null)は機能しませんでしたがsetMenuBarVisibility(false)、期待どおりに機能します(@Artiumが言及したように、キーを押してバー元に戻すことはできませんalt)。
Amir A. Shabani

これは私のために働いたソリューションです。正しいとマークされている答えは、Ubuntu 18.04、Electron v6.0.9
Christoffer

すごい!メニューバーを表示せずにキーボードショートカットを含める簡単な方法が必要でした。トンありがとう!
Anis R.

26

Electron 7.1.1の場合、これを使用できます。

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

6
私の更新編集:Menu.setApplicationMenu(null)で働いていた7.1.2他の解決策は私のために動作しませんでした!
TessavWalstijn

1
7.1.4でも動作します。正解を更新して、この問題のあるすべての人が解決策に到達できるようにしてください。
沼崎エミリオ

電子7.1.6で私のために働く
Iuninefrendor

1
@OP-Stack Overflowへようこそ。すばらしい回答に感謝します。1つの注意-MS Wordなどの他のプログラムから引用符をコピーして貼り付けるときは注意してください。「electron」のようなフォーマットされた引用符は、ほとんどの場合「electron」のようなフォーマットされていない引用符と同じではありません。
sfarbota

1
electron 7.19で動作します。これは正解として間違いなく更新されます
Darkrender

9

アプリをパッケージ化すると、デフォルトメニューは表示されなくなります。これが開発中にsetMenu(null)バグを引き起こしている場合は、@ TonyVincentによって提案されているようにブラウザーウィンドウで呼び出すことができます。


アプリをパッケージ化するとデフォルトメニューが削除されることをお伝えいただきありがとうございます。その特定の点について疑問に思っていました。
raddevus

9

7.0.0以降、上記のソリューションのほとんどが機能しなくなります。 すべてのウィンドウのメニューを変更するにBrowserWindow.setMenu()置き換えられましたMenu.setApplicationMenu()setMenu()removeMenu()何もしなくなりました。ちなみにこれはまだドキュメントに記載されています。

setAutoHideMenuBar()は機能しますが、ホットキー修飾子としてAltを使用することを計画している場合は、迷惑になる可能性があります。メニューが表示されたら、ウィンドウから離れて(フォーカスを失って)再度クリックしてメニューを非表示にする必要があります。

アプリケーションに複数のウィンドウがある場合、各ウィンドウで個別にメニューを設定/削除することはできません。メニューを削除する唯一の方法は、フレームレスウィンドウアプローチを使用することです。それはたまたま私の現在のアプリケーションに必要なことですが、すべての場合に良い解決策とは限りません。


ありがとう、これは7.0以降で機能する唯一のものです!docs / changelogs / etcでこれについての言及はありますか?
rvighne

githubプロジェクトリンクで開いている問題があります。計画された廃止かバグかはわからない。
P Fuster、

9

メニューは非表示にすることも自動的に非表示にすることもできますSlackVS Codeのように、Altを押してメニューの表示/非表示を切り替えることができます)。

関連する方法:

---- win.setMenu(menu) -メニューをウィンドウのメニューバーとして設定し、それをnullに設定するとメニューバーが削除されます。(これにより、メニューが完全に削除されます

mainWindow.setMenu(null)


---- win.setAutoHideMenuBar(hide) -ウィンドウメニューバーを自動的に非表示にするかどうかを設定します。一度設定すると、メニューバー
、ユーザーが単一のAltキーを押したときにのみ 表示されます。

mainWindow.setAutoHideMenuBar(true)

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

以下に示すように、フレームのないウィンドウを作成する方法もあります。

(閉じるボタンはありません。私たちが望むものにすることができます(より良いデザイン))

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

編集:(新規)

win.removeMenu() Linux Windowsウィンドウのメニューバーを削除します。

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

win.setMenu(null)を使用する代わりに、アプリケーションメニューを削除するwin.removeMenu()を追加しました

これは、v5から次のように追加されます。

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

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

Electron v7バグ

Electron 7.1.1の場合Menu.setApplicationMenuは、win.removeMenu()

このスレッドに従って:https :
//github.com/electron/electron/issues/16521

そして大きな注意点は、BrowserWindowを作成する前に呼び出す必要があるということです。またはそれは動作しません!

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

Menu.setApplicationMenu(null);

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

UPDATE(BrowserWindow構成でのautoHideMenuBarの設定)

@kcprコメント通り!プロパティと多くをコンストラクタに設定できます

これは最新のElectronの安定バージョンである8.3で利用可能です。
しかし、古いバージョンでも、v1、v2、v3、v4をチェックしました!
それはすべてのバージョンにあります!

このリンクに従って
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

そしてv8.3の場合
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions

ドキュメントリンク
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

オプションのドキュメントから:

autoHideMenuBarブール値(オプション)-Altキーが押されない限り、メニューバーを自動的に非表示にします。デフォルトはfalseです。

これを説明するスニペットを次に示します。


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

1
setAutoHideMenuBarは廃止されました
Mister SirCode '24年

以下のエドマーによる答えは、より良いバージョンであり、メニューを自動非表示にするための最新のコードです
Mister SirCode '11

1
Electron 8.2.5(以前のバージョンでもそうだと思います)では、メニューバーが次のようにBrowserWindowコンストラクターで自動的に非表示になるように定義できますnew BrowserWindow({autoHideMenuBar: true})。そして、ところで、この答えをありがとう。私にとってはおそらく最も完全なもののようです(メソッドがまだ存在し、非推奨ではない場合)。
kcpr

@kcprお返事ありがとうございます!これを反映するように答えを更新しました!
Mohamed Allal

@MohamedAllal、かっこいい!ありがとうございます。私のコメントが役に立ったと思います。また、あなたが行った追加の研究とあなたが共有した結果にも感謝します。
kcpr

6
@"electron": "^7.1.1" : 

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

ブラウザのメニューなしで期待どおりに機能します。


(電子) 'setAutoHideMenuBar function'は廃止され、削除されます。代わりに「autoHideMenuBarプロパティ」を使用してください。@ "electron": "^ 7.1.1":mainWindow = new browserWindow({height:500、width:800}); mainWindow.autoHideMenuBar = true;
Rachuri

3

この問題の回答に従って、ウィンドウが作成さMenu.setApplicationMenu(null) れる前に電話する必要があります


ねえ、Stack Overflowへようこそ!他の回答へのリンクは、回答よりもコメントとして適しています。これは、リンクされた質問の回答をこのユーザーの特定のシナリオに実際に適用していないためです。
David Chopin



0

これらのソリューションにはバグがあります。以下のソリューションを使用すると、ウィンドウが閉じるときに遅延が発生します。

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

以下の解決策を使用しました。これは今のところより良いです。

const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.