< Angular-Electron

Angular-Electron - Menü

Szerző: Sallai András

Copyright © 2024, Sallai András

Licenc: CC BY-SA 4.0

Web: https://szit.hu

Bevezetés

Szabályozhatjuk az alkalmazásunknak legyen menüsávja, vagy ne legyen.

Készíthetünk saját menüsávot is.

Ebben a leírásban nem szerepel az index.html és a hozzátartozó fájlok létrehozása. Csak a belépési ponttal foglalkozunk.

A beépített menü

Az autoHideMenuBar: true beállítással elrejthetjük az alapértelmezett menüt.

const { app, BrowserWindow } = require('electron') const createWindow = () => { const win = new BrowserWindow({ width: 350, height: 260, autoHideMenuBar: true }) win.loadFile('index.html') } app.whenReady().then(() => { createWindow() })

Saját menü készítése

const { app, BrowserWindow, Menu } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, icon: 'public/icon.png', }); win.loadFile('dist/electron-app/browser/index.html'); } app.whenReady().then(() => { createWindow() }) const appMenu = [ { label: 'Fájl', submenu: [ { label: 'Kilép', role: 'quit', accelerator: 'CmdOrCtrl+K' } ] }, { label: 'Súgó', submenu: [ { label: 'Névjegy', role: 'about', accelerator: 'CmdOrCtrl+N' } ] } ] app.setAboutPanelOptions({ applicationName: 'Angular Electron App', applicationVersion: '1.0.0', copyright: 'Copyright (c) 2022, Nagy János', authors: ['Nagy János'], website: 'https://szit.hu', iconPath: 'public/icon.png' }) app.on('ready', () => { const menu = Menu.buildFromTemplate(appMenu) Menu.setApplicationMenu(menu) })

Névjegy másként

Telepítés:

npm install about-window

const { default: openAboutWindow } = require('about-window'); const { app, BrowserWindow, Menu } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, icon: 'public/icon.png', }); win.loadFile('dist/electron-app/browser/index.html'); } app.whenReady().then(() => { createWindow() }) const appMenu = [ { label: 'Fájl', submenu: [ { label: 'Kilép', role: 'quit', accelerator: 'CmdOrCtrl+K' } ] }, { label: 'Súgó', submenu: [ { label: 'Névjegy', click: () => { openAboutWindow({ icon_path: `${process.cwd()}/public/icon.png`, product_name: 'Valami', copyright: 'Copyright (c) 2024, Nagy János', homepage: 'https://szit.hu', description: 'Minta alkalmazás' }) }, accelerator: 'CmdOrCtrl+N' } ] } ] app.on('ready', () => { const menu = Menu.buildFromTemplate(appMenu) Menu.setApplicationMenu(menu) })

Linkek

https://www.electronjs.org/docs/latest/api/app#appsetaboutpaneloptionsoptions (2024)

https://www.npmjs.com/package/electron-about-window (2024)