How do I remove this menu-bar from my electron apps:
Also it says "Hello World"(is this because I downloaded electron pre-built, and will go away once I package the application?). I didn't code these into the html, so I don't know how to get it out!-
You can use w.setMenu(null) or set frame: false (this also removes buttons for close, minimize and maximize options) on your window. See setMenu() or BrowserWindow(). Also check this thread
Electron now has win.removeMenu() (added in v5.0.0), to remove application menus instead of using win.setMenu(null).
Electron 7.1.x seems to have a bug where win.removeMenu() doesn't work. The only workaround is to use Menu.setApplicationMenu(null), however, this will disable all the menu shortcuts like F11 for toggling fullscreen etc.
In new versions of Electron, you can set autoHideMenuBar: true while creating browserWindow, pressing Alt will show the menu bar again.
const mainWindow = new BrowserWindow({
autoHideMenuBar: true,
})
Use this:
mainWindow = new BrowserWindow({width: 640, height: 360})
mainWindow.setMenuBarVisibility(false)
Reference: https://github.com/electron/electron/issues/1415
I tried mainWindow.setMenu(null), but it didn't work.
For Electron 7.1.1, you can use this:
const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(false)
The menu can be hidden or auto-hidden (like in Slack or VS Code - you can press Alt to show/hide the menu).
Relevant methods:
---- win.setMenu(menu) - Sets the menu as the window’s menu bar,
setting it to null will remove the menu bar. (This will remove the menu completly)
mainWindow.setMenu(null)
---- win.setAutoHideMenuBar(hide) - Sets whether the window menu bar
should hide itself automatically. Once set the menu bar will only
show when users press the single Alt key.
mainWindow.setAutoHideMenuBar(true)
Source: https://github.com/Automattic/simplenote-electron/issues/293
There is also the method for making a frameless window as shown bellow:
(no close button no anything. Can be what we want (better design))
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: (new)
win.removeMenu() Linux Windows Remove the window's menu bar.
https://electronjs.org/docs/api/browser-window#winremovemenu-linux-windows
Added win.removeMenu() to remove application menus instead of using win.setMenu(null)
That is added from v5 as per:
https://github.com/electron/electron/pull/16570
https://github.com/electron/electron/pull/16657
Electron v7 bug
For Electron 7.1.1 use Menu.setApplicationMenu instead of win.removeMenu()
as per this thread:
https://github.com/electron/electron/issues/16521
And the big note is: you have to call it before creating the BrowserWindow! Or it will not work!
const {app, BrowserWindow, Menu} = require('electron')
Menu.setApplicationMenu(null);
const browserWindow = new BrowserWindow({/*...*/});
UPDATE (Setting autoHideMenuBar on BrowserWindow construction)
As by #kcpr comment! We can set the property and many on the constructor
That's available on the latest stable version of electron by now which is 8.3!
But too in old versions i checked for v1, v2, v3, v4!
It's there in all versions!
As per this link
https://github.com/electron/electron/blob/1-3-x/docs/api/browser-window.md
And for the v8.3
https://github.com/electron/electron/blob/v8.3.0/docs/api/browser-window.md#new-browserwindowoptions
The doc link
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions
From the doc for the option:
autoHideMenuBar Boolean (optional) - Auto hide the menu bar unless the Alt key is pressed. Default is false.
Here a snippet to illustrate it:
let browserWindow = new BrowserWindow({
width: 800,
height: 600,
autoHideMenuBar: true // <<< here
})
When you package your app the default menu won't be there anymore, if this is bugging you during development then you can call setMenu(null) on the browser window as suggested by #TonyVincent.
As of 7.0.0, most of the above solutions no longer work.
BrowserWindow.setMenu() has been replaced by Menu.setApplicationMenu(), which now changes the menu on all windows. setMenu(), removeMenu() no longer do anything, Which by the way are still mentioned in the docs.
setAutoHideMenuBar() still works, but could be a nuisance if you planned to use Alt as a hotkey modifier. Once menu is visible you have to click away from window (loose focus) to hide menu again.
If your application has more than one window, you can't set/remove menus separately on each window. The only way to remove a menu is to use the frameless window approach. That happens to be what I want in my current application, but not a good solution in all cases.
#"electron": "^7.1.1" :
mainWindow = new browserWindow({ height: 500, width: 800});
//mainWindow.setAutoHideMenuBar(true);
mainWindow.autoHideMenuBar = true;
Working as expected without menu in browser.
These solutions has bug.
When use solutions at below, windows has delay at closing.
Menu.setApplicationMenu(null),
&&
const updateErrorWindow = new BrowserWindow({autoHideMenuBar: true});
I used solution at below. This is better for now.
const window= new BrowserWindow({...});
window.setMenuBarVisibility(false);
set autoHideMenuBar to true while creating the browserWindow
mainWindow = new BrowserWindow({
autoHideMenuBar: true,
width: 1200,
height: 800
})
Electron 12.0.6:
let mainWindow = new BrowserWindow({
autoHideMenuBar: true
});
Following the answer from this issue, you must call Menu.setApplicationMenu(null) before the window is created
2020 Update, the only bl**dy thing that worked for me:
Menu.setApplicationMenu(new Menu());
setMenu(null); is the best answer, autohidemenu will display on the start of the application
function createWindow(){
const win = new BrowserWindow({
width: 1500,
height: 800,
webPreferences:{
nodeIntergration: true
}
});
win.setMenu(null);
win.loadFile("index.html");
}
app.whenReady().then(createWindow);
Before this line at main.js:
mainWindow = new BrowserWindow({width: 800, height: 900})
mainWindow.setMenu(null) //this will r menu bar
Most of the answers here are not valid for newer versions. With the version of 9.0 or upper, Menu.setApplicationMenu(null); should work. By the way, Menu exported from electron package: const {Menu} = require('electron');
According to the official documentation # https://github.com/electron/electron/blob/v8.0.0-beta.1/docs/api/menu.md the proper way to do this now since 7.1.2 and I have tested it on 8.0 as well is to :
const { app, Menu } = require('electron')
Menu.setApplicationMenu(null)
Even if autoHideMenuBar: true, you still can toggle menu bar with Alt key.
So to hide it completely, use mainWindow.setMenu(null)
Related
In my electron app, a user can open different windows.
I have the menu initialized when the main window is created like so:
const menuContents = Menu.buildFromTemplate(menuTemplate(mainWindow))
Menu.setApplicationMenu(menuContents)
However, when a user clicks a link and opens a new window, this same menu bar still appears in that window. I would like to change it and/or completely remove it.
How would I do that?
It's possible:
Example for Menus
In Renderer or Main Proccess make two functions with menu templates like this:
main menu
function createMenu(){
var menu = Menu.buildFromTemplate([
{
//your menu items
}
])
Menu.setApplicationMenu(menu);
}
second menu
function createMenuwin(){
var menu = Menu.buildFromTemplate([
{
//your other window menu items
}
])
Menu.setApplicationMenu(menu);
}
when you call the second window : Example open an image
function openIMG(path){
win = new BrowserWindow({
width: 800,
height: 550,
frame: true,
vibrancy: 'medium-light',
});
win.loadFile(path);
createMenuwin();
win.on('close', () =>{
createMenu();
})
}
when the second window is open create an app menu with
createmenuwin()
when the second window is closed call the event:
win.on('close', () =>{})
inside the close event of the second window, call:
createMenu();
I developed an app using Xamarin forms that has side menu see this url.
But I couldn't use this in my current project, so I made my custom component for side menu.
How to implementing feature that hide menu when I tap range out of side menu?
It is hard to give you any help without seeing your code, but generally I tackle this issue by adding a ContentView that covers the screen when ever your menu opens. The menu would be displayed on top of the ContentView. Then you add a TapGestureRecognizer to the ContentView which closes the menu when clicked.
You could add some color to the ContentView but make it opaque so it is see-through, something like this color: #74787878
ContentView backgroundView = new ContentView {
BackgroundColor = Color.FromHex("#74787878"),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Content = //Your menu
}
backgroundView.GestureRecognizers.Add(new TapGestureRecognizer {
Command = new Command(() => {
//Remove the background and hide the menu
})
});
I made use of YUI scrollview to make a menu construction with touch, flick and arrows. However, for some reason the arrows have a bug.
When the page is loaded the first time it works fine, however, as soon as the user scrolls the page with its mouse of with swipe (on tablet or phone) the arrows do not work any more. When I swipe the content, the arrows magically come to live and work again.
This is the script I use for scrollView:
YUI().use('scrollview-base', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#clientslider-content',
width : 950,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "x"
}
});
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});
scrollView.render();
var content = scrollView.get("contentBox");
var scrollViewCurrentX = $('#clientslider-content').offset();
content.delegate("click", function(e) {
var scrollViewNewX = $('#clientslider-content').offset();
var scrollMarginL = (scrollViewNewX.left-2);
var scrollMarginR = (scrollViewNewX.left+2);
if (scrollViewCurrentX.left < scrollMarginL || scrollViewCurrentX.left > scrollMarginR)
{
e.preventDefault();
}
}, ".clientlink");
content.delegate("mousedown", function(e) {
scrollViewCurrentX = $('#clientslider-content').offset();
e.preventDefault();
}, "a, img");
Y.one('#clientslider-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
Y.one('#clientslider-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
});
You can find a demo here:
http://www.circlesoftware.nl/demo/test.html
To reproduce:
- load the page
- press the right button (do not do anything else)
- scroll down with your mouse
- arrows are broken now
To fix:
- just grap the content of the slider, swipe it
- try the left or right button and they work again
Does anyone have ANY idea what might be the problem here?
Problem came from the library itself it seems, was using 3.7.3, upgrade it to 3.9.1 and seems to be solved now:
http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js
I'm using Dojo version 1.6.1. I'm building a menu that has a Dialog dijit as a popup from a PopupMenuItem. This works, however, if the menu is docked on the right-hand side of the application I need the popup to display to the left of the menu. I can't seem to get this to work. If I use another type of widget (like a ColorPalette), this works fine. With popup submenus and a popup ColorPalette, everything opens to the left if the menu is on the right-hand side of the screen, and everything opens to the right if the menu is on the left-hand side of the screen. Dojo just handles this automatically. But with any Dialog widget, even an empty one, it always pops out to the right of the PopupMenuItem regardless of where the menu is on the screen. I thought that perhaps specifying height and width of the div that is the dijit.Dialog would resolve this, but it did not.
Here's a simplified version of the code:
<div data-dojo-type="dijit.Menu" id="toolPalette" style="position:absolute; right:0; top:0; z-index: 999;">
</div>
<script>
// Grab the div for the menu, declared in the HTML above.
var toolPalette = dijit.byId("toolPalette");
// This tool button has a popup
var menuItem1 = new dijit.PopupMenuItem({
id: "menuItem1",
iconClass: "shelterIcon",
popup: new dijit.Dialog()
});
toolPalette.addChild(menuItem1);
// This tool button does not have a popup
var menuItem2 = new dijit.MenuItem({
id: "menuItem2",
iconClass: "shelterIcon"
});
toolPalette.addChild(menuItem2);
toolPalette.startup();
</script>
Any help is greatly appreciated! I've tried everything I can think of.
Way to find your current Cursor location
document.onmouseup = getXY;
var mouseX, mouseY;
function getXY(e) {
mouseX= (e || event).clientX;
mouseY= (e || event).clientY;
if (document.documentElement.scrollTop > 0) {
mouseY= mouseY+ document.documentElement.scrollTop;
}
}
Your Code here .
var myDialog = new dijit.Dialog();
var menuItem1 = new dijit.PopupMenuItem({
id: "menuItem1",
iconClass: "shelterIcon",
popup: myDialog
});
Now apply the X and Y to your Dialog.
dijit.popup.open({
x: mouseX,
y : mouseY,
popup: myDialog
});
Using YUI, I want to create a menu button, passing in the menu widget instance.
Result is what looks like a menu button, but the menu doesn't show.
test case: http://sandbox.kluger.com/menu_test.html
// key code section:
var D = YAHOO.util.Dom,
menu = new YAHOO.widget.Menu(D.generateId(), {lazyload: true});
menu.addItems(params.menu);
var t = new YAHOO.widget.Button({
type: "menu",
label: params.label,
menu: menu,
container: el
});
Do I need to render the menu before giving it to the Button?
If you want to see the params.menu, check the test case. The params.menu object is correct, it creates a menu when directly supplied to widget.Button. That's tested in the test case.
Any ideas appreciated.
Yes, you need to render. Add menu.render(document.body); after menu.addItems(params.menu); and it should work fine.