Tartalomjegyzék

< Angular-Electron

Angular-Electron - Menü

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.

electron.js
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

electron.js
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
src/electron.js
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