Hapus batang menu dari aplikasi Electron


105

Bagaimana cara menghapus bilah menu ini dari aplikasi elektron saya:

menu-bar

Juga dikatakan "Hello World" (apakah ini karena saya mengunduh electron yang dibuat sebelumnya, dan akan hilang begitu saya mengemas aplikasi?). Saya tidak mengkodekannya ke dalam html, jadi saya tidak tahu bagaimana cara mengeluarkannya! -

Jawaban:


150

Anda dapat menggunakan w.setMenu(null)atau mengatur frame: false(ini juga menghilangkan tombol untuk menutup, meminimalkan dan memaksimalkan pilihan) di jendela Anda. Lihat setMenu () atau BrowserWindow () . Periksa juga utas ini


Electron sekarang memiliki win.removeMenu()( ditambahkan di v5.0.0 ), untuk menghapus menu aplikasi daripada menggunakan win.setMenu(null).


Electron 7.1.x tampaknya memiliki bug di mana win.removeMenu()tidak berfungsi. Satu-satunya solusi adalah dengan menggunakanMenu.setApplicationMenu(null)


4
frame: falsemelakukannya untuk saya.
mwilson

5
fwiw removeMenu()adalah Linux & Windows saja
musim semi

bagaimana dengan jendela yang dibuka oleh window.open () di jendela yang sudah terbuka yang memiliki menu?
Michael

4
Electron 7.1.1 memiliki masalah di mana setMenudan removeMenutidak berfungsi lagi tautan
P Fuster

1
Solusi asli atau edit tidak berfungsi. Ini seharusnya bukan lagi jawabannya.
Tyguy7

65

Gunakan ini:

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

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

Saya mencoba mainWindow.setMenu(null), tetapi tidak berhasil.


2
Saya mencoba mainWindow.setMenu(null)dengan electron 5.0.2 dan tidak berhasil juga. Tidak yakin mengapa saya melihat saran untuk menggunakannya di mana-mana, dan mengembara jika saya satu-satunya yang melakukan sesuatu yang tidak benar. Saran Anda tentang penggunaan setMenuBarVisibility, meskipun menghilangkan visibilitas bilah menu, tidak menghapusnya sepenuhnya. Itu bisa dibawa kembali dengan menekan Alttombol.
Artium

1
FWIW: Dengan Pemilu 6.0.X tidak ada .setMenu(null)atau tidak .removeMenu()berhasil untuk saya. .setMenuBarVisibility(false)menghapus bilah menu dan Altkuncinya hanya berfungsi jika .setAutoHideMenuBar(true)dijalankan.
Bob Nadler

1
+1, di Arch Linux, setMenu(null)tidak berfungsi, tetapi setMenuBarVisibility(false)berfungsi seperti yang diharapkan (bilah tidak dapat dikembalikan dengan menekan alttombol seperti yang disebutkan @Artium).
Amir A. Shabani

Ini adalah solusi yang berhasil untuk saya. Jawaban yang ditandai benar tidak berfungsi di Ubuntu 18.04, Electron v6.0.9
Christoffer

Bagus! Saya membutuhkan cara sederhana untuk memasukkan pintasan keyboard tanpa menampilkan bilah menu. Terima kasih banyak!
Anis R.29

27

Untuk Electron 7.1.1, Anda dapat menggunakan ini:

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

6
Perbarui edit untuk saya: Menu.setApplicationMenu(null)berfungsi di 7.1.2Solusi lain tidak berhasil untuk saya!
TessavWalstijn

1
Ini juga berfungsi pada 7.1.4. Harap perbarui jawaban yang benar untuk memastikan semua orang yang memiliki masalah ini dapat mencapai solusi.
Emilio Numazaki

Bekerja untuk saya di electron 7.1.6
Iuninefrendor

1
@OP - Selamat datang di Stack Overflow dan terima kasih atas jawaban yang bagus! Satu catatan - Harap berhati-hati saat menyalin dan menempelkan tanda kutip dari program lain seperti MS Word. Kutipan berformat seperti 'electron' tidak sama dengan kutipan tanpa format seperti 'electron' dalam banyak kasus.
sfarbota

1
Bekerja untuk saya di electron 7.19 Ini pasti harus diperbarui sebagai jawaban yang benar
Darkrender

9

Ketika Anda mengemas aplikasi Anda, menu default tidak akan ada lagi, jika ini mengganggu Anda selama pengembangan, maka Anda dapat memanggil setMenu(null)di jendela browser seperti yang disarankan oleh @TonyVincent.


Terima kasih telah menyebutkan bahwa memaketkan aplikasi akan menghapus menu default. Saya bertanya-tanya tentang poin spesifik itu.
raddevus

9

Mulai 7.0.0, sebagian besar solusi di atas tidak lagi berfungsi. BrowserWindow.setMenu()telah diganti oleh Menu.setApplicationMenu(), yang sekarang mengubah menu di semua jendela. setMenu(), removeMenu()tidak lagi melakukan apa-apa, Yang omong-omong masih disebutkan di dokumen.

setAutoHideMenuBar()masih berfungsi, tetapi bisa menjadi gangguan jika Anda berencana menggunakan Alt sebagai pengubah hotkey. Setelah menu terlihat, Anda harus mengklik menjauh dari jendela (fokus longgar) untuk menyembunyikan menu lagi.

Jika aplikasi Anda memiliki lebih dari satu jendela, Anda tidak dapat mengatur / menghapus menu secara terpisah di setiap jendela. Satu-satunya cara untuk menghapus menu adalah dengan menggunakan pendekatan jendela tanpa bingkai. Kebetulan itulah yang saya inginkan dalam aplikasi saya saat ini, tetapi bukan solusi yang baik dalam semua kasus.


Terima kasih, ini adalah satu-satunya yang berfungsi sejak 7.0! Apakah ini disebutkan di docs / changelogs / etc?
rvighne

Ada masalah yang terbuka di tautan proyek github . Tidak tahu apakah itu adalah penghentian yang direncanakan atau bug.
P Fuster

9

Menu dapat disembunyikan atau disembunyikan otomatis (seperti di Slack atau VS Code - Anda dapat menekan Alt untuk menampilkan / menyembunyikan menu).

Metode yang relevan:

---- win.setMenu (menu) - Mengatur menu sebagai bilah menu jendela, mengaturnya ke nol akan menghapus bilah menu. ( Ini akan menghapus menu sepenuhnya )

mainWindow.setMenu(null)


---- win.setAutoHideMenuBar (sembunyikan) - Mengatur apakah bilah menu jendela harus menyembunyikan dirinya secara otomatis. Setelah ditetapkan menu bar hanya akan
menunjukkan
bila pengguna menekan single tombol Alt .

mainWindow.setAutoHideMenuBar(true)

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

Ada juga metode untuk membuat jendela tanpa bingkai seperti yang ditunjukkan di bawah ini:

(tidak ada tombol tutup tidak apa-apa. Bisa apa yang kita inginkan (desain lebih baik))

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: (baru)

win.removeMenu() Linux Windows Hapus bilah menu jendela.

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

Menambahkan win.removeMenu () untuk menghapus menu aplikasi daripada menggunakan win.setMenu (null)

Itu ditambahkan dari v5 sesuai:

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

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

Bug Electron v7

Untuk Electron 7.1.1 menggunakan Menu.setApplicationMenubukannyawin.removeMenu()

sesuai utas ini:
https://github.com/electron/electron/issues/16521

Dan catatan besarnya adalah: Anda harus memanggilnya sebelum membuat BrowserWindow ! Atau itu tidak akan berhasil!

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

Menu.setApplicationMenu(null);

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

UPDATE (Mengatur autoHideMenuBar pada konstruksi BrowserWindow)

Seperti oleh komentar @kcpr! Kita dapat mengatur properti dan banyak lagi di konstruktor

Itu tersedia pada versi stabil elektron terbaru sekarang yaitu 8.3!
Tetapi juga di versi lama saya memeriksa v1, v2, v3, v4!
Itu ada di semua versi!

Sesuai tautan ini
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

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

Tautan dokumen
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

Dari dokumen untuk opsi:

autoHideMenuBar Boolean (opsional) - Otomatis menyembunyikan bilah menu kecuali jika tombol Alt ditekan. Default-nya salah.

Berikut cuplikan untuk menggambarkannya:


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

1
setAutoHideMenuBar tidak digunakan lagi
Pak SirCode

Jawaban oleh Edmar di bawah ini adalah versi yang lebih baik, kode terbaru untuk autoHiding menu
Mister SirCode

1
Dalam Electron 8.2.5 (saya menduga bahwa juga di versi sebelumnya) itu mungkin untuk mendefinisikan, bahwa menu bar harus auto-tersembunyi di BrowserWindowkonstruktor seperti: new BrowserWindow({autoHideMenuBar: true}). Dan, omong-omong, terima kasih atas jawaban ini. Tampaknya bagi saya mungkin yang paling lengkap (dengan asumsi bahwa metode tersebut masih ada dan tidak usang).
kcpr

@kcpr Terima kasih atas jawaban Anda! Saya memperbarui jawaban untuk mencerminkan ini!
Mohamed Allal

@MohamedAllal, keren! Terima kasih, saya senang Anda menganggap komentar saya bermanfaat. Dan terima kasih, juga, untuk penelitian ekstra yang Anda buat dan hasil yang Anda bagikan.
kcpr

6
@"electron": "^7.1.1" : 

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

Bekerja seperti yang diharapkan tanpa menu di browser.


(electron) 'setAutoHideMenuBar function' tidak digunakan lagi dan akan dihapus. Gunakan 'properti autoHideMenuBar' sebagai gantinya. @ "electron": "^ 7.1.1": mainWindow = browserWindow baru ({tinggi: 500, lebar: 800}); mainWindow.autoHideMenuBar = true;
Rachuri

3

Sebelum baris ini di main.js:

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

mainWindow.setMenu(null) //this will r menu bar

3

Mengikuti jawaban dari masalah ini , Anda harus menelepon Menu.setApplicationMenu(null) sebelum jendela dibuat


Hai, selamat datang di Stack Overflow! Tautan ke jawaban lain lebih cocok sebagai komentar daripada jawaban. Ini karena Anda tidak benar-benar menerapkan jawaban dalam pertanyaan terkait ke skenario khusus pengguna ini.
David Chopin


0

Solusi ini memiliki bug. Saat menggunakan solusi di bawah ini, jendela mengalami penundaan saat penutupan.

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

Saya menggunakan solusi di bawah ini. Ini lebih baik untuk saat ini.

const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.