当前位置:网站首页>[electron playground series] menu

[electron playground series] menu

2020-12-08 09:09:11 Xiaoqiantou

author : Liang Bangbang

1. brief introduction

The menu is mainly divided into application menu 、 Context menu , stay tray and dock It's also useful for menus , This section mainly introduces the first two . Document address

1.1 Application menu

mac and windows It's all in the upper left corner , But one in the upper left corner of the screen and one in the upper left corner of the application view .
mac That's true :

mac-menu.png

windows Long like this :

win-menu.png

If windows There is no menu displayed under , In the current window, press alt The key will appear .

1.2 Context menu

Right click menu .

2. Create a menu

2.1 Create application menu

Next we create the application menu . Following steps :

  1. introduce Menu class
  2. Define a menu template
  3. call Menu Class buildFromTemplate Method , This method creates the corresponding menu based on the template passed in
  4. call Menu Class setApplicationMenu Method

This is the four steps to create the application menu , Let's take a look at the renderings .

create-menu.gif

Attach code :

//  Step one 
const { Menu, dialog, app } = require('electron')

//  Step two 
const template = [
  {
    label: 'app', // macOS The next tag is the application name , This setting is invalid 
    submenu: [
      { label: ' sign out ', click: () => { app.quit() } },
      { label: ' About ', click: () => { app.showAboutPanel() } }
    ]
  },
  {
    label: ' file ',
    submenu: [
      {
        label: ' Sub menu ', 
        click: () => {
          //  Called dialog( Pop up module ), Demonstration effect 
          dialog.showMessageBoxSync({
            type: 'info',
            title: ' Tips ',
            message: ' Click on the submenu '
          })
        }
      }
    ]
  }
]

//  Step three 
const menu = Menu.buildFromTemplate(template)

//  Step four 
Menu.setApplicationMenu(menu)

2.2 Create context menu

That is to create a right-click menu , The first three steps are the same as creating the application menu , The last step is to listen to the window context-menu Event display menu options .
Monitoring events context-menu file

First on the renderings .

create-context-menu.gif

Attach code :

//  Step one 
const { Menu, BrowserWindow } = require('electron')

//  Step two 
const template = [
  {
    label: 'app', // macOS The next tag is the application name , This setting is invalid 
    submenu: [
      { role: 'quit' },
      { role: 'about' }
    ]
  },
  {
    label: ' edit ',
    role: 'editMenu'
  }
]

//  Step three 
const contextMenu = Menu.buildFromTemplate(template)

//  Step four 
//  The main process , The rendering process can use window.addEventListener Set listening Events 
BrowserWindow.getFocusedWindow().webContents.on('context-menu', () => {
  contextMenu.popup()
})

Maybe you've found out , This example has less code than the last one , There are more menus to implement , And this role What is it again , Don't worry. , To look down .

3. Set Menu Properties

Last section said , This role What is it ?
In fact, there are two ways to create menu behavior , One is customization , namely 1.1 In the way of , The other is pre-defined, that is role.

role yes MenuItem Properties of , yes electron The predefined behavior of . file say : It's best to specify... For any menu role To match a standard character , Instead of trying to be in click Function to implement this behavior manually . Built in role Behavior will provide the best native experience . Use role when , label and accelerator Value is optional , And for each platform , The default value is appropriate .

That is to say , You just set it up role attribute , So the copy of this menu 、 Shortcut key 、 Event behavior has been implemented internally , And it's better than a custom behavioral experience .

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

const templateCustom = [
  {
    label: 'app', // macOS The next tag is the application name , This setting is invalid 
    submenu: [
      { label: 'quit', role: 'quit' },
      {label: ' About ', role: 'about', accelerator: 'CommandOrControl + shift + H' }
    ]
  },
  {
    label: ' edit ',
    submenu: [
      {role: 'editMenu'},
      {type: 'separator'},
      {label: ' Customize ', click: () => {
        const win = new BrowserWindow()
        win.loadURL('https://electronjs.org')
      } }
    ]
  }
]

const customMenu = Menu.buildFromTemplate(templateCustom)

Menu.setApplicationMenu(customMenu)

The above code line8 Of accelerator Is to set the properties of the shortcut key .

4. The hidden menu

If we use some menus in development , But don't want users to see , And keep it online , For example, debug window , Easy to find online bug, So the properties of the hidden menu visible I can use it .

Take a look at the renderings :

hide-menu.gif

const { Menu } = require('electron')
const menu = Menu.getApplicationMenu()

//  Get the menu you want to hide and set its properties visible Set to false
menu.items[3].submenu.items[2].visible = false;

As shown in the figure : At first you can see view The submenu of Toggle Developer Tools Switch debug window , Click execute to hide the menu , Now through the shortcut key cmd+option+I(windows Next ctrl+shift+I) Switch debug window .

We are the front of the blackboard , Welcome to our You know SegmentfaultCSDN Simple books Open source in China Blog Garden account number .

版权声明
本文为[Xiaoqiantou]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201208090837501f.html