Electron 앱에서 메뉴 바 제거


105

전자 앱에서이 메뉴 바를 제거하는 방법 :

메뉴 바

또한 "Hello World"라고 표시되어 있습니다 (이는 사전 빌드 된 전자를 다운로드했기 때문에 응용 프로그램을 패키징하면 사라질까 요?). 나는 이것을 html로 코딩하지 않았기 때문에 그것을 얻는 방법을 모릅니다!-

답변:


150

창에서 사용 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 전용입니다.
— spring

메뉴가있는 이미 열려있는 창에서 window.open ()으로 열린 창에서는 어떻습니까?
— 마이클

4
전자 7.1.1 어디에 문제가있는 setMenu그리고 removeMenu더 이상 작동하지 않는 링크
— P 푸 스터

1
원본 또는 편집 솔루션이 작동하지 않습니다. 더 이상 답이되어서는 안됩니다.
— Tyguy7

65

이것을 사용하십시오 :

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 : 6.0.X 선거에서는 .setMenu(null)나 에게도 효과가 없었 .removeMenu()습니다. .setMenuBarVisibility(false)메뉴 표시 줄을 제거하고 Alt키 .setAutoHideMenuBar(true)가 실행되는 경우에만 작동 합니다.
— Bob Nadler

1
+1, Arch Linux에서 setMenu(null)작동하지 않았지만 setMenuBarVisibility(false)예상대로 작동합니다 ( @Artium이 언급 한대로 키를 눌러 막대 를 다시 가져올 수 없음alt ).
— 아미르 A. 샤 바니

이것은 나를 위해 일한 솔루션입니다. 올바른 표시된 대답은, 전자 v6.0.9 우분투 18.04에서 작동하지 않습니다
— 크리스토퍼

큰! 메뉴 모음을 표시하지 않고 바로 가기 키를 포함하는 간단한 방법이 필요했습니다. 정말 감사합니다!
— Anis R.

27

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에서도 작동합니다. 이 문제가있는 모든 사람이 해결책에 도달 할 수 있도록 정답을 업데이트하십시오.
— Emilio Numazaki

전자 7.1.6에서 나를 위해 작품
— Iuninefrendor

1
@OP-Stack Overflow에 오신 것을 환영하며 훌륭한 답변에 감사드립니다! 참고 사항-MS Word와 같은 다른 프로그램에서 인용 부호를 복사하여 붙여 넣을 때주의하십시오. 'electron'과 같은 형식화 된 따옴표는 대부분의 경우 'electron'과 같은 형식화되지 않은 따옴표와 다릅니다.
— sfarbota

1
전자 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

메뉴를 숨길 수 있습니다 또는 자동 숨김 (처럼 여유 나 VS 코드 - 당신이 할 수 있습니다 보여 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

문서 : 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 버그

전자 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 코멘트로! 생성자에 속성과 많은 것을 설정할 수 있습니다.

현재 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 Boolean (선택 사항)-Alt 키를 누르지 않는 한 메뉴 모음을 자동으로 숨 깁니다. 기본값은 거짓입니다.

다음은이를 설명하는 스 니펫입니다.


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

1
setAutoHideMenuBar는 더 이상 사용되지 않습니다
— Mister SirCode

아래 Edmar의 대답은 더 나은 버전, 메뉴 자동 숨기기를위한 최신 코드입니다.
— Mister SirCode

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 함수'는 더 이상 사용되지 않으며 제거됩니다. 대신 'autoHideMenuBar 속성'을 사용하십시오. @ "electron": "^ 7.1.1": mainWindow = new browserWindow ({높이 : 500, 너비 : 800}); mainWindow.autoHideMenuBar = true;
— Rachuri

3

main.js에서이 줄 앞 :

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

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

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.