Usuń pasek menu z aplikacji Electron


105

Jak usunąć ten pasek menu z moich aplikacji electron:

pasek menu

Jest tam również napisane „Hello World” (czy to dlatego, że pobrałem wstępnie skompilowaną aplikację Electron i zniknie ona po spakowaniu aplikacji?). Nie zakodowałem ich w html, więc nie wiem, jak to usunąć! -

Odpowiedzi:


150

Możesz użyć w.setMenu(null)lub ustawić frame: false(usuwa to również przyciski zamykania, minimalizowania i maksymalizowania opcji) w oknie. Zobacz setMenu () lub BrowserWindow () . Sprawdź również ten wątek


Electron ma teraz win.removeMenu()( dodany w wersji 5.0.0 ), aby usunąć menu aplikacji zamiast używać win.setMenu(null).


Wygląda na to, że Electron 7.1.x ma błąd, win.removeMenu()który nie działa. Jedynym obejściem jest użycieMenu.setApplicationMenu(null)


4
frame: falsezrobił to dla mnie.
mwilson

5
fwiw removeMenu()to tylko Linux i Windows
wiosna

a co z oknami otwieranymi przez window.open () w już otwartym oknie z menu?
Michael

4
Electron 7.1.1 ma problem z linkiemsetMenu i removeMenunie działa
P Fuster

1
Ani oryginał, ani rozwiązania do edycji nie działają. To nie powinno już być odpowiedzią.
Tyguy7

65

Użyj tego:

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

Źródła: https://github.com/electron/electron/issues/1415

Próbowałem mainWindow.setMenu(null), ale to nie zadziałało.


2
Próbowałem mainWindow.setMenu(null)z elektronem 5.0.2 i to też mi się nie udało. Nie jestem pewien, dlaczego widzę, że radzę używać go wszędzie i błąkałem się, jeśli jestem jedyną osobą, która robi coś nieprawidłowo. Twoja rada dotycząca używania setMenuBarVisibility, choć usuwa widoczność paska menu, nie usuwa go całkowicie. Można go przywrócić, naciskając Altklawisz.
Artium

1
FWIW: Z Wybory 6.0.X ani .setMenu(null)czy .removeMenu()pracował dla mnie. .setMenuBarVisibility(false)usuwa pasek menu, a Altklawisz działa tylko wtedy, gdy .setAutoHideMenuBar(true)jest uruchomiony.
Bob Nadler

1
+1 w Arch Linux setMenu(null)nie działało, ale setMenuBarVisibility(false)działa zgodnie z oczekiwaniami (paska nie można przywrócić przez naciśnięcie altklawisza, jak wspomniano w @Artium).
Amir A. Shabani,

To rozwiązanie, które mi się sprawdziło. Odpowiedź oznaczona jako poprawna nie działa na Ubuntu 18.04, Electron v6.0.9
Christoffer

Wspaniały! Potrzebowałem prostego sposobu na dołączenie skrótów klawiaturowych bez pokazywania paska menu. Wielkie dzięki!
Anis R.

27

W przypadku Electron 7.1.1 możesz użyć tego:

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

6
Zaktualizuj edycję dla mnie: Menu.setApplicationMenu(null)działał w 7.1.2innych rozwiązaniach nie działa dla mnie!
TessavWalstijn

1
Działa również w wersji 7.1.4. Zaktualizuj poprawną odpowiedź, aby upewnić się, że każdy z tym problemem będzie mógł znaleźć rozwiązanie.
Emilio Numazaki

Działa dla mnie w elektronie 7.1.6
Iuninefrendor

1
@OP - Witamy w Stack Overflow i dzięki za świetną odpowiedź! Jedna uwaga - zachowaj ostrożność podczas kopiowania i wklejania cudzysłowów z innych programów, takich jak MS Word. Sformatowane cudzysłowy, takie jak „elektron”, w większości przypadków nie są tym samym, co niesformatowane cudzysłowy, takie jak „elektron”.
sfarbota

1
U mnie działa w elektronie 7.19 To zdecydowanie powinno zostać zaktualizowane jako poprawna odpowiedź
Darkrender

9

Kiedy spakujesz swoją aplikację, domyślne menu nie będzie już dostępne, jeśli przeszkadza ci to podczas programowania, możesz wywołać setMenu(null)okno przeglądarki zgodnie z sugestią @TonyVincent.


Dziękujemy za wspomnienie, że spakowanie aplikacji spowoduje usunięcie domyślnego menu. Zastanawiałem się nad tym konkretnym punktem.
raddevus

9

Od wersji 7.0.0 większość powyższych rozwiązań już nie działa. BrowserWindow.setMenu()został zastąpiony przez Menu.setApplicationMenu(), który teraz zmienia menu we wszystkich oknach. setMenu(), removeMenu()już nic nie rób, o czym nawiasem mówiąc nadal wspomina się w dokumentacji.

setAutoHideMenuBar()nadal działa, ale może być uciążliwy, jeśli planujesz użyć Alt jako modyfikatora skrótu. Gdy menu jest widoczne, musisz kliknąć poza oknem (stracić ostrość), aby ponownie je ukryć.

Jeśli twoja aplikacja ma więcej niż jedno okno, nie możesz ustawiać / usuwać menu oddzielnie w każdym oknie. Jedynym sposobem usunięcia menu jest użycie bezramkowego podejścia do okna. Tak się składa, że ​​właśnie tego chcę w mojej obecnej aplikacji, ale nie we wszystkich przypadkach jest to dobre rozwiązanie.


Dziękuję, to jedyna rzecz, która działa od wersji 7.0! Czy jest jakaś wzmianka o tym w dokumentach / changelogs / etc?
rvighne

W linku do projektu na githubie jest otwarty problem . Nie wiem, czy było to planowane wycofanie, czy błąd.
P Fuster

9

Menu może być ukryte lub automatycznie ukryte (jak w Slack lub VS Code - możesz nacisnąć Alt, aby wyświetlić / ukryć menu).

Odpowiednie metody:

---- win.setMenu (menu) - Ustawia menu jako pasek menu okna, ustawienie go na null usunie pasek menu. ( Spowoduje to całkowite usunięcie menu )

mainWindow.setMenu(null)


---- win.setAutoHideMenuBar (hide) - Ustawia, czy pasek menu okna ma się ukrywać automatycznie. Po ustawieniu pasek menu będzie
wyświetlany tylko
wtedy, gdy użytkownicy naciśną pojedynczy klawisz Alt .

mainWindow.setAutoHideMenuBar(true)

Źródło: https://github.com/Automattic/simplenote-electron/issues/293

Istnieje również metoda tworzenia okna bezramowego, jak pokazano poniżej:

(bez przycisku zamykania nic. Może być tym, czego chcemy (lepszy projekt))

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

Edycja: (nowe)

win.removeMenu() Linux Windows Usuń pasek menu okna.

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

Dodano win.removeMenu () do usuwania menu aplikacji zamiast używania win.setMenu (null)

To jest dodawane od wersji 5 zgodnie z:

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

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

Błąd Electron v7

W przypadku Electron 7.1.1 użyj Menu.setApplicationMenuzamiastwin.removeMenu()

zgodnie z tym wątkiem:
https://github.com/electron/electron/issues/16521

I ważna uwaga: musisz to wywołać przed utworzeniem BrowserWindow ! Albo to nie zadziała!

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

Menu.setApplicationMenu(null);

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

UPDATE (Ustawianie autoHideMenuBar w konstrukcji BrowserWindow)

Zgodnie z komentarzem @kcpr! Możemy ustawić tę właściwość i wiele w konstruktorze

To jest już dostępne w najnowszej stabilnej wersji electron, która jest teraz 8.3!
Ale także w starszych wersjach sprawdziłem v1, v2, v3, v4!
Jest we wszystkich wersjach!

Zgodnie z tym linkiem
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

Oraz w wersji 8.3
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions

Link do dokumentu
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

Z dokumentu dotyczącego opcji:

autoHideMenuBar Boolean (opcjonalne) - Automatyczne ukrywanie paska menu do momentu naciśnięcia klawisza Alt. Wartość domyślna to false.

Oto fragment ilustrujący to:


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

1
setAutoHideMenuBar jest przestarzały
Mister SirCode

Odpowiedź od Edmara poniżej to lepsza wersja, najnowszy kod do automatycznego ukrywania menu
Mister SirCode

1
W Electron 8.2.5 (podejrzewam, że także w poprzednich wersjach) to można określić, że pasek menu powinien być automatycznie ukryte w BrowserWindowkonstruktorze tak: new BrowserWindow({autoHideMenuBar: true}). A tak przy okazji, dziękuję Ci za tę odpowiedź. Wydaje mi się, że jest to prawdopodobnie najbardziej kompletny (zakładając, że metody nadal istnieją i nie są przestarzałe).
kcpr

@kcpr Dziękuję za odpowiedź! Zaktualizowałem odpowiedź, aby to odzwierciedlić!
Mohamed Allal

@MohamedAllal, super! Dziękuję, cieszę się, że uznałeś mój komentarz za przydatny. Dziękuję również za dodatkowe badania, które przeprowadziłeś i wyniki, którymi się podzieliłeś.
kcpr

6
@"electron": "^7.1.1" : 

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

Działa zgodnie z oczekiwaniami bez menu w przeglądarce.


(electron) „setAutoHideMenuBar function” jest przestarzałe i zostanie usunięte. Zamiast tego użyj właściwości „autoHideMenuBar”. @ "electron": "^ 7.1.1": mainWindow = new browserWindow ({wysokość: 500, szerokość: 800}); mainWindow.autoHideMenuBar = true;
Rachuri

3

Przed tą linią w main.js:

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

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

3

Zgodnie z odpowiedzią z tego problemu , musisz zadzwonić Menu.setApplicationMenu(null) przed utworzeniem okna


Hej, witamy w Stack Overflow! Linki do innych odpowiedzi lepiej nadają się jako komentarze niż odpowiedzi. Dzieje się tak, ponieważ w rzeczywistości nie stosujesz odpowiedzi w powiązanym pytaniu w konkretnym scenariuszu tego użytkownika.
David Chopin


0

Te rozwiązania mają błąd. W przypadku zastosowania poniższych rozwiązań okna mają opóźnienie przy zamykaniu.

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

Zastosowałem rozwiązanie poniżej. Na razie jest lepiej.

const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.