electron tray

Do you really understand what I mean? here is an example;

你真的明白我的意思吗？ 这是一个例子；

So that is it!

就是这样！

If you are completely new in Electron JS development, please consider checking my recent articles on the tray, menu, tray icon, and more, since we will not cover them here.

如果您是Electron JS开发的新手，请考虑查看我最近在纸盘， 菜单 ， 纸盘图标等上的文章，因为我们在这里不介绍它们。

In this tutorial, we will simply set up a simple Electron JS application without a browser window or just window and display a tray icon which will display our menu when right-clicked.

在本教程中，我们将简单地建立一个简单的Electron JS应用程序，而没有浏览器窗口或仅窗口，并显示一个托盘图标，单击鼠标右键将显示我们的菜单。

Adding a radio or checkbox on a menu is just as simple as creating the tray icon menu itself.

在菜单上添加单选按钮或复选框与创建任务栏图标菜单本身一样简单。

Hey! Remember I said it is a tray icon menu, not the browser window menu.

嘿! 记住，我说的是一个托盘图标菜单，而不是浏览器窗口菜单。

Take Note: To achieve this, we will make use of the type property of the menu instance. This property accepts a string value that could either be a checkbox or radio.

注意：要实现此目的，我们将使用菜单实例的type属性。 该属性接受一个字符串值，该值可以是复选框，也可以是单选。

Quickly open your main entry JavaScript file and type the following

快速打开您的主条目JavaScript文件，然后键入以下内容

//system tray icon menu//
const electron = require ('electron')  // imports electron
const path = require ('path') // imports path module
const {app, Menu, Tray} = electron // imports menu and tray modules
let mainWindow;
let tray
app.on('ready', _ => {tray = new Tray (path.join ('src', 'Tray.PNG' ) ) // sets tray icon image
const contextMenu = Menu.buildFromTemplate([   // define menu items
{label: 'Help',
type : "checkbox",    // type property which defines a checkbox
click: () => console.log ('Help')  // click event handler
},{label : 'Troubleshoot?',
type:'radio',
click: () => console.log ('troubleshooted')
},
{label: 'System',
type : "radio", // type property which defines radio
click: () => console.log ('System')  // click event handler
}
])
tray.setContextMenu(contextMenu)
})

Output:

输出：

Finally, run your code and enjoy output,

最后，运行您的代码并享受输出，

You can see the start icon and the menu when right clicked. Below is the output when clicked.

右键单击时，您可以看到开始图标和菜单。 下面是单击时的输出。

Thanks for reading.

谢谢阅读。

Drop your comments if in need of help.

如果需要帮助，请删除您的评论。

翻译自: https://www.includehelp.com/electron-js/add-radio-and-checkbox-in-electron-js-tray-menu-items.aspx

electron tray