概覽?

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

在 MacOS 和 Ubuntu, 托盤(pán)將位于屏幕右上角上，靠近你的電池和 wifi 圖標(biāo)。 在 Windows 上，托盤(pán)通常位于右下角。

示例?

main.js

首先，我們需要從 electron 導(dǎo)入 app, Tray, Menu, nativeImage

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

下一步我們將創(chuàng)建托盤(pán)。 要做到這一點(diǎn)，我們將使用一個(gè) NativeImage 圖標(biāo)， 可以通過(guò)其中任一方法創(chuàng)建 methods。 請(qǐng)注意，我們將托盤(pán)創(chuàng)建代碼包裝在一個(gè) app.whenReady ，因?yàn)槲覀冃枰却?electron 應(yīng)用完成初始化

let tray

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

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

太好了！ 現(xiàn)在我們可以開(kāi)始將上下文菜單附加到我們的托盤(pá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個(gè)單獨(dú)的 radio-type 單選類(lèi)型項(xiàng)。

最后，讓我們給我們的托盤(pán)一個(gè)工具提示和標(biāo)題。

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

結(jié)論

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