Menu
The electron app open with the same default menu that appear in the electron-quick-start example app and how to change it?
Also tried the menu example on the docs but nothing changes.
when I hide the menu with mainWindow.setMenu(null); the menu is gone but still can't init the new menu
any ideas?
platform: windows 7
electron ver: 0.36.4
ref files:
package.json:
{
"name": "electric_timer",
"version": "0.1.0",
"description": "a Time sheet & project managment",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "none"
},
"author": "Eyal Ron",
"license": "MIT"
}
app.js:
var app = require('app');
var BrowserWindow = require('browser-window');
app.on('ready', function (){
var mainWindow = new BrowserWindow({
width: 800,
height: 600
});
mainWindow.setMenu(null);
mainWindow.loadUrl('file://' + __dirname + '/main.html');
});
main.js:
var remote = require('remote');
var Menu = remote.require('menu');
var menu = Menu.buildFromTemplate([
{
label: 'Electron',
submenu: [
{
label: 'Prefs',
click: function(){
alert('hello menu');
}
}
]
}
]);
Menu.setApplicationMenu(menu);
main.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>electron test</title>
</head>
<body>
<h1>hello world</h1>
<script>requier('./main.js')</script>
</body>
</html>
414
For creating a custom electron menu, first, we have to import the menu module into the main application file – 'main. js'. After importing the module, create a template for the menu using “buildFromTemplate” function from the menu module. The function takes array input and each menu item is given in JSON format.
To remove menu bar from Electron app, we can set the autoHideMenuBar to true . to create a BrowserWindow instance by passing in an object with autoHideMenuBar set to true . As a result, the menu bar would be hidden in the app.
It is slowIt is just the renderer, and just like a web app in a regular browser, it uses HTML, CSS and JavaScript to build an interface and provide functionality. Those are a lot of extra layers. And because of this additional abstraction, it can be slower than a finely tuned native app. Sure.
We use electron for the desktop app, so it's all javascript and react!
Electron's 'default_app' sets the menu; if you want to avoid this, you need Electron to start your app directly not via the default app (note: if you start your app with something like electron . you actually start the default app).
Electron looks in its resource folder for 'app', 'app.asar' or 'default_app', so in order to start your app directly you need to either copy or link it into Electron's resource folder.
Regardless of how you start your app, you can set your menu using Menu.setApplicationMenu -- you can do it in the main process, you don't need to do it in the Renderer like in your example. Incidentally, there is a typo in your main.html (requier instead of require) so if that's your actual code it would indicate that your main.js does not run at all.
139
Put your logic to customise the menu into your app('ready') event callback. Give try to following code example
const {app, BrowserWindow, Menu} = require('electron');
let mainWindow;
let menuTemplate = [
{
label: "Window Manager",
submenu: [
{ label: "create New" }
]
},
{
label : "View",
submenu : [
{ role : "reload" },
{ label : "custom reload" }
]
}
];
function appInit () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600})
// and load the main.html of the app.
mainWindow.loadFile('main.html')
let menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu);
}
app.on('ready', () => {
appInit();
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
