Eliminar la barra de menú de la aplicación Electron


104

¿Cómo elimino esta barra de menú de mis aplicaciones electrónicas?

Barra de menús

También dice "Hola mundo" (¿se debe a que descargué electron preconstruido y desaparecerá una vez que empaquete la aplicación?). No los codifiqué en el html, ¡así que no sé cómo sacarlo! -

Respuestas:


149

Puede usar w.setMenu(null)o establecer frame: false(esto también elimina los botones para cerrar, minimizar y maximizar las opciones) en su ventana. Consulte setMenu () o BrowserWindow () . También revisa este hilo


Electron ahora tiene win.removeMenu()( agregado en v5.0.0 ), para eliminar los menús de la aplicación en lugar de usar win.setMenu(null).


Electron 7.1.x parece tener un error en el win.removeMenu()que no funciona. La única solución alternativa es usarMenu.setApplicationMenu(null)


4
frame: falselo hizo por mí.
mwilson

5
fwiw removeMenu()es solo para Linux y Windows
primavera

¿Qué pasa con las ventanas abiertas por window.open () en una ventana ya abierta que tiene un menú?
Michael

4
Electron 7.1.1 tiene un problema donde setMenuy removeMenuno funciona más enlace
P Fuster

1
Ni la solución original ni la de edición funcionan. Ésta ya no debería ser la respuesta.
Tyguy7

63

Utilizar este:

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

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

Lo intenté mainWindow.setMenu(null), pero no funcionó.


2
Probé mainWindow.setMenu(null)con electron 5.0.2 y no funcionó bien. No estoy seguro de por qué veo el consejo de usarlo en todas partes, y estaba divagando si soy el único que está haciendo algo incorrectamente. Su consejo de uso setMenuBarVisibility, aunque elimina la visibilidad de la barra de menú, no la elimina por completo. Se puede recuperar presionando la Alttecla.
Artium

1
FWIW: Con Election 6.0.X ninguno de los dos .setMenu(null)ni .removeMenu()funcionó para mí. .setMenuBarVisibility(false)elimina la barra de menú y la Alttecla solo funciona si .setAutoHideMenuBar(true)se ejecuta.
Bob Nadler

1
+1, en Arch Linux, setMenu(null)no funcionó, pero setMenuBarVisibility(false)funciona como se esperaba (la barra no se puede recuperar presionando la alttecla como mencionó @Artium).
Amir A. Shabani

Esta es la solución que funcionó para mí. La respuesta marcada como correcta no funciona en Ubuntu 18.04, Electron v6.0.9
Christoffer

¡Excelente! Necesitaba una forma sencilla de incluir atajos de teclado sin mostrar la barra de menú. ¡Gracias una tonelada!
Anis R.

26

Para Electron 7.1.1, puede usar esto:

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

6
Actualizar la edición para mí: Menu.setApplicationMenu(null)funcionó en ¡ 7.1.2Otras soluciones no funcionaron para mí!
TessavWalstijn

1
También funciona en 7.1.4. Actualice la respuesta correcta para asegurarse de que todos los que tengan este problema puedan encontrar la solución.
Emilio Numazaki

Funciona para mí en el electrón 7.1.6
Iuninefrendor

1
@OP - ¡Bienvenido a Stack Overflow y gracias por la excelente respuesta! Una nota: tenga cuidado al copiar y pegar comillas de otros programas como MS Word. Las citas formateadas como 'electrón' no son lo mismo que las citas sin formato como 'electrón' en la mayoría de los casos.
sfarbota

1
Funciona para mí en electron 7.19 Esto definitivamente debería actualizarse como la respuesta correcta
Darkrender

9

Cuando empaqueta su aplicación, el menú predeterminado ya no estará allí, si esto lo molesta durante el desarrollo, puede llamar setMenu(null)a la ventana del navegador como lo sugiere @TonyVincent.


Gracias por mencionar que empaquetar la aplicación eliminará el menú predeterminado. Me preguntaba sobre ese punto específico.
raddevus

9

A partir de 7.0.0, la mayoría de las soluciones anteriores ya no funcionan. BrowserWindow.setMenu()ha sido reemplazado por Menu.setApplicationMenu(), que ahora cambia el menú en todas las ventanas. setMenu(), removeMenu()ya no hacen nada, que por cierto todavía se mencionan en los documentos.

setAutoHideMenuBar()todavía funciona, pero podría ser una molestia si planeaba usar Alt como modificador de teclas de acceso rápido. Una vez que el menú está visible, debe hacer clic fuera de la ventana (perder el enfoque) para ocultar el menú nuevamente.

Si su aplicación tiene más de una ventana, no puede configurar / eliminar menús por separado en cada ventana. La única forma de eliminar un menú es utilizar el enfoque de ventana sin marco. Eso es lo que quiero en mi aplicación actual, pero no es una buena solución en todos los casos.


¡Gracias, esto es lo único que funciona desde 7.0! ¿Hay alguna mención de esto en los documentos / registros de cambios / etc.?
rvighne

Hay un problema abierto en el enlace del proyecto github . No sé si fue una desaprobación planificada o un error.
P Fuster

9

El menú puede ocultarse o ocultarse automáticamente (como en Slack o VS Code ; puede presionar Alt para mostrar / ocultar el menú).

Métodos relevantes:

---- win.setMenu (menú) : establece el menú como la barra de menú de la ventana, si lo establece en nulo se eliminará la barra de menú. ( Esto eliminará el menú por completo )

mainWindow.setMenu(null)


---- win.setAutoHideMenuBar (ocultar) : establece si la barra de menú de la ventana debe ocultarse automáticamente. Una vez configurada, la barra de menú solo se
mostrará
cuando los usuarios presionen la tecla Alt .

mainWindow.setAutoHideMenuBar(true)

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

También existe el método para hacer una ventana sin marco como se muestra a continuación:

(sin botón de cierre ni nada. Puede ser lo que queramos (mejor diseño))

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

Editar: (nuevo)

win.removeMenu() Linux Windows Elimina la barra de menú de la ventana.

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

Se agregó win.removeMenu () para eliminar los menús de la aplicación en lugar de usar win.setMenu (nulo)

Eso se agrega desde v5 según:

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

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

Error de electron v7

Para Electron 7.1.1 use en Menu.setApplicationMenulugar dewin.removeMenu()

según este hilo:
https://github.com/electron/electron/issues/16521

Y la gran nota es: ¡tienes que llamarlo antes de crear la ventana del navegador ! ¡O no funcionará!

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

Menu.setApplicationMenu(null);

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

ACTUALIZAR (Configuración de autoHideMenuBar en la construcción de BrowserWindow)

¡Como por @kcpr comentario! Podemos establecer la propiedad y muchos en el constructor.

¡Eso está disponible en la última versión estable de electron que es 8.3!
¡Pero también en versiones antiguas verifiqué v1, v2, v3, v4!
¡Está ahí en todas las versiones!

Según este enlace
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md

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

El enlace del documento
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions

Desde el documento de la opción:

autoHideMenuBar Boolean (opcional): oculta automáticamente la barra de menú a menos que se presione la tecla Alt. El valor predeterminado es falso.

Aquí un fragmento para ilustrarlo:


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

1
setAutoHideMenuBar está obsoleto
Mister SirCode

La respuesta de Edmar a continuación es una versión mejor, el último código para ocultar automáticamente el menú
Mister SirCode

1
En Electrón 8.2.5 (sospecho que también en las versiones anteriores) es posible definir, que la barra de menú debe estar oculta automáticamente en BrowserWindowconstructor de este modo: new BrowserWindow({autoHideMenuBar: true}). Y, por cierto, gracias por esta respuesta. Me parece que probablemente sea el más completo (asumiendo que los métodos aún existen y no están en desuso).
kcpr

@kcpr ¡Gracias por tu respuesta! ¡Actualicé la respuesta para reflejar esto!
Mohamed Allal

@MohamedAllal, ¡genial! Gracias, me alegra que consideres útil mi comentario. Y gracias, también, por la investigación adicional que realizó y los resultados que compartió.
kcpr

6
@"electron": "^7.1.1" : 

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

Funciona como se esperaba sin menú en el navegador.


(electron) 'setAutoHideMenuBar function' está en desuso y se eliminará. En su lugar, utilice 'autoHideMenuBar property'. @ "electron": "^ 7.1.1": mainWindow = nueva ventana del navegador ({altura: 500, ancho: 800}); mainWindow.autoHideMenuBar = true;
Rachuri

3

Siguiendo la respuesta de este problema , debe llamar Menu.setApplicationMenu(null) antes de que se cree la ventana.


¡Bienvenidos a Stack Overflow! Los enlaces a otras respuestas son más adecuados como comentarios que como respuestas. Esto se debe a que en realidad no está aplicando la respuesta de la pregunta vinculada al escenario específico de este usuario.
David Chopin

2

Antes de esta línea en main.js:

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

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


0

Estas soluciones tienen errores. Cuando se utilizan soluciones a continuación, las ventanas se demoran en cerrarse.

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

Usé la solución a continuación. Esto es mejor por ahora.

const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.