原文:https://github.com/electron/electron/blob/master/docs/api/tray.md
譯者:Lin
添加圖標(biāo)和右鍵菜單到系統(tǒng)的通知區(qū)域
進(jìn)程:主進(jìn)程
Tray
是一個(gè)EventEmitter檀头。
const {app, Menu, Tray} = require('electron')
let tray = null
app.on('ready', () => {
tray = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{label: 'Item1', type: 'radio'},
{label: 'Item2', type: 'radio'},
{label: 'Item3', type: 'radio', checked: true},
{label: 'Item4', type: 'radio'}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
})
平臺(tái)的局限性:
- Linux中如果支持應(yīng)用指示器那么應(yīng)用指示器將被使用,否則將使用
GtkStatusIcon
代替覆糟。 - Linux發(fā)行版中支持應(yīng)用指示器顶捷,你需要安裝
libappindicator1
來使tray圖標(biāo)工作弃舒。 - 當(dāng)有右鍵菜單時(shí)才會(huì)展示應(yīng)用指示器。
- 當(dāng)Linux中的應(yīng)用指示器被使用,
click
事件將被忽略杖剪。 - Linux中為了使個(gè)別的
MenuItems
的改變生效,你需要再次調(diào)用setContextMenu
驰贷。例如:
const {app, Menu, Tray} = require('electron')
let appIcon = null
app.on('ready', () => {
appIcon = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
{label: 'Item1', type: 'radio'},
{label: 'Item2', type: 'radio'}
])
// Make a change to the context menu
contextMenu.items[1].checked = false
// Call this again for Linux because we modified the context menu
appIcon.setContextMenu(contextMenu)
})
- Windows中建議使用ICO格式的圖標(biāo)來獲得最好的視覺效果盛嘿。
如果你想在所有平臺(tái)上保持完全相同的行為,你需要不依賴點(diǎn)擊事件并且將右鍵菜單依附在托盤圖標(biāo)上括袒。
new Tray(image)
-
image
(NativeImage | String)類型
通過image
創(chuàng)建一個(gè)托盤圖標(biāo)次兆。
實(shí)例的事件
Tray
模塊分發(fā)以下事件:
事件: 'click'
-
event
Event類型-
altKey
Boolean類型 -
shiftKey
Boolean類型 -
ctrlKey
Boolean類型 -
metaKey
Boolean類型
-
-
bounds
Rectangle類型 - 托盤圖標(biāo)的邊界。
當(dāng)托盤圖片被點(diǎn)擊的時(shí)候被分發(fā)锹锰。
事件: 'right-click' MacOS Windows
-
event
Event-
altKey
Boolean -
shiftKey
Boolean -
ctrlKey
Boolean -
metaKey
Boolean
-
-
bounds
Rectangle類型 - 托盤圖標(biāo)的邊界类垦。
當(dāng)托盤圖片被右鍵點(diǎn)擊的時(shí)候被分發(fā)。
事件: 'double-click' MacOS Windows
-
event
Event-
altKey
Boolean -
shiftKey
Boolean -
ctrlKey
Boolean -
metaKey
Boolean
-
-
bounds
Rectangle類型 - 托盤圖標(biāo)的邊界城须。
當(dāng)托盤圖片被雙擊的時(shí)候被分發(fā)蚤认。
事件: 'balloon-show' Windows
當(dāng)托盤氣球展示的時(shí)候被分發(fā)。
事件: 'balloon-click' Windows
當(dāng)托盤氣球被點(diǎn)擊的時(shí)候被分發(fā)糕伐。
事件: 'balloon-closed' Windows
當(dāng)托盤氣球因?yàn)槌瑫r(shí)關(guān)閉或者用戶手動(dòng)點(diǎn)擊關(guān)閉時(shí)被分發(fā)砰琢。
事件: 'drop' MacOS
任何被拖動(dòng)的項(xiàng)目被拖動(dòng)到托盤圖標(biāo)上的時(shí)候被分發(fā)。
事件: 'drop-files' MacOS
-
event
Event類型 -
files
String[]類型 - 被拖動(dòng)的文件的路徑。
被拖動(dòng)的文件拖動(dòng)到托盤圖標(biāo)里面的時(shí)候被分發(fā)陪汽。
事件: 'drop-text' MacOS
-
event
Event類型 -
text
String類型 - 被拖動(dòng)的文本字符串训唱。
被拖動(dòng)的文本拖動(dòng)到托盤圖標(biāo)里面的時(shí)候被分發(fā)。
事件: 'drag-enter' MacOS
當(dāng)一個(gè)拖動(dòng)操作進(jìn)入到托盤圖標(biāo)的時(shí)候被分發(fā)挚冤。
事件: 'drag-leave' MacOS
當(dāng)一個(gè)拖動(dòng)操作離開托盤圖標(biāo)的時(shí)候被分發(fā)况增。
事件: 'drag-end' MacOS
當(dāng)拖動(dòng)操作在托盤圖標(biāo)上釋放或在其他的位置釋放時(shí)被分發(fā)。
實(shí)例的方法
Tray
類有以下方法:
tray.destroy()
立刻銷毀托盤圖標(biāo)训挡。
tray.setImage(image)
-
image
(NativeImage | String)類型
設(shè)置托盤圖標(biāo)澳骤。
tray.setPressedImage(image)
MacOS
-
image
NativeImage類型
設(shè)置MacOS下按下托盤圖標(biāo)是的托盤圖標(biāo)。
tray.setToolTip(toolTip)
-
toolTip
String類型
設(shè)置托盤圖標(biāo)的懸停文本澜薄。
tray.setTitle(title)
MacOS
-
title
String類型
設(shè)置顯示在狀態(tài)欄中托盤圖標(biāo)旁邊的文字为肮。
tray.setHighlightMode(mode)
MacOS
-
mode
String類型 - 高亮模式有以下值類型:-
selection
- 托盤圖標(biāo)被點(diǎn)擊的時(shí)候和右鍵菜單打開的時(shí)候高亮。這個(gè)是默認(rèn)值肤京。 -
always
- 托盤圖標(biāo)維持高亮狀體颊艳。 -
never
- 托盤圖標(biāo)沒有高亮狀態(tài)。
-
設(shè)置什么時(shí)候托盤的圖標(biāo)背景變成高亮狀態(tài)(藍(lán)色)忘分。
注意:當(dāng)窗口是否可見狀態(tài)改變的時(shí)候棋枕,你可以使用BrowserWindow
的highlightMode
在'never'
和'always'
模式指尖切換。
const {BrowserWindow, Tray} = require('electron')
const win = new BrowserWindow({width: 800, height: 600})
const tray = new Tray('/path/to/my/icon')
tray.on('click', () => {
win.isVisible() ? win.hide() : win.show()
})
win.on('show', () => {
tray.setHighlightMode('always')
})
win.on('hide', () => {
tray.setHighlightMode('never')
})
tray.displayBalloon(options)
Windows
-
options
Object類型-
icon
(NativeImage | String)類型(可選參數(shù)) -
title
String類型(可選參數(shù)) -
content
String類型(可選參數(shù))
-
展示一個(gè)托盤氣球妒峦。
tray.popUpContextMenu([menu, position])
MacOS Windows
-
menu
Menu類型(可選參數(shù)) -
position
Object類型(可選參數(shù))- 彈出的位置重斑。-
x
Integer -
y
Integer
-
彈出一個(gè)托盤圖標(biāo)的右鍵菜單。當(dāng)menu
參數(shù)被設(shè)置舟山,menu
將被展示代替托盤圖標(biāo)的右鍵菜單绸狐。
position
只在Windows中有效,并且默認(rèn)值是(0, 0)
累盗。
tray.setContextMenu(menu)
-
menu
Menu類型
給這個(gè)托盤圖標(biāo)設(shè)置右鍵菜單寒矿。
tray.getBounds()
MacOS Windows
返回值為Rectangle
類型
作為Object
的托盤圖標(biāo)的bounds
。
tray.isDestroyed()
返回值為Boolean
類型 - 托盤圖標(biāo)是否被銷毀若债。