Tray

概览

当前指南将带领你创建 Tray 图标, 并且其拥有系统通知区域的独立上下文菜单

在 MacOS 和 Ubuntu, 托盘将位于屏幕右上角上,靠近你的电池和 wifi 图标。 在 Windows 上,托盘通常位于右下角。

示例

main.js

首先,我们需要从 electron 导入 app, Tray, Menu, nativeImage

  1. const { app, Tray, Menu, nativeImage } = require('electron')

下一步我们将创建托盘。 要做到这一点,我们将使用一个 NativeImage 图标, 可以通过其中任一方法创建 methods。 请注意,我们将托盘创建代码包装在一个 app.whenReady ,因为我们需要等待 electron 应用完成初始化

main.js

  1. let tray
  2. app.whenReady().then(() => {
  3. const icon = nativeImage.createFromPath('path/to/asset.png')
  4. tray = new Tray(icon)
  5. // 注意: 你的 contextMenu, Tooltip 和 Title 代码需要写在这里!
  6. })

太好了! 现在我们可以开始将上下文菜单附加到我们的托盘上,就像这样:

  1. const contextMenu = Menu.buildFromTemplate([
  2. { label: 'Item1', type: 'radio' },
  3. { label: 'Item2', type: 'radio' },
  4. { label: 'Item3', type: 'radio', checked: true },
  5. { label: 'Item4', type: 'radio' }
  6. ])
  7. tray.setContextMenu(contextMenu)

上面的代码将在上下文菜单中创建4个单独的 radio-type 单选类型项。 要阅读更多关于构建原生菜单的信息,请点击 这里

最后,让我们给我们的托盘一个工具提示和标题。

  1. tray.setToolTip('This is my application')
  2. tray.setTitle('This is my title')

结论

在启动应用后,你应该看到屏幕的顶部或底部右侧的托盘, 具体位置取决于操作系统。 fiddle docs/latest/fiddles/native-ui/tray