Electron Tray

概覽?

當前指南將帶領你創(chuàng)建 Tray 圖標, 并且其擁有系統(tǒng)通知區(qū)域的獨立上下文菜單

在 MacOS 和 Ubuntu, 托盤將位于屏幕右上角上，靠近你的電池和 wifi 圖標。 在 Windows 上，托盤通常位于右下角。

示例?

main.js

首先，我們需要從 electron 導入 app, Tray, Menu, nativeImage

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

下一步我們將創(chuàng)建托盤。 要做到這一點，我們將使用一個 NativeImage 圖標， 可以通過其中任一方法創(chuàng)建 methods。 請注意，我們將托盤創(chuàng)建代碼包裝在一個 app.whenReady ，因為我們需要等待 electron 應用完成初始化

let tray

app.whenReady().then(() => {
  const icon = nativeImage.createFromPath('path/to/asset.png')
  tray = new Tray(icon)

  // 注意: 你的 contextMenu, Tooltip 和 Title 代碼需要寫在這里!
})

太好了！ 現(xiàn)在我們可以開始將上下文菜單附加到我們的托盤上，就像這樣：

const contextMenu = Menu.buildFromTemplate([
  { label: 'Item1', type: 'radio' },
  { label: 'Item2', type: 'radio' },
  { label: 'Item3', type: 'radio', checked: true },
  { label: 'Item4', type: 'radio' }
])

tray.setContextMenu(contextMenu)

上面的代碼將在上下文菜單中創(chuàng)建4個單獨的 radio-type 單選類型項。

最后，讓我們給我們的托盤一個工具提示和標題。

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

結論

在啟動應用后，你應該看到屏幕的頂部或底部右側的托盤， 具體位置取決于操作系統(tǒng)。 fiddle docs/latest/fiddles/native-ui/tray