Class:Tray
将图标和上下文菜单添加到系统的通知区域。
可使用的进程: 主进程
Tray 是一个 事件发出者。
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)
})
平台限制:
- 在 Linux, 如果支持应用指示器则使用它,否则使用
GtkStatusIcon代替。 - 在 Linux ,配置了只有有了应用指示器的支持, 你必须安装
libappindicator1来让 tray icon 执行。 - 应用指示器只有在它拥有 context menu 时才会显示。
- 当在linux 上使用了应用指示器,将忽略点击事件。
- 在 Linux,为了让单独的
MenuItem起效,需要再次调用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)
})
如果想在所有平台保持完全相同的行为,不应该依赖点击事件,而是一直将一个 context menu 添加到 tray icon。
new Tray(image)
image(NativeImage | String)
创建一个与 image 相关的 icon。
Instance Events
Tray 模块可发出下列事件:
Event: 'click'
eventEventaltKeyBooleanshiftKeyBooleanctrlKeyBooleanmetaKeyBoolean
boundsRectangle - tray icon 的 bounds
当 tray icon 被点击的时候发出事件。
Event: 'right-click' macOS Windows
eventEventaltKeyBooleanshiftKeyBooleanctrlKeyBooleanmetaKeyBoolean
boundsRectangle - tray icon 的 bounds
当 tray icon 被鼠标右键点击的时候发出事件。
Event: 'double-click' macOS Windows
eventEventaltKeyBooleanshiftKeyBooleanctrlKeyBooleanmetaKeyBoolean
boundsRectangle - tray icon 的 bounds
当 tray icon 被双击的时候发出事件。
Event: 'balloon-show' Windows
当 tray 气泡显示的时候发出事件。
Event: 'balloon-click' Windows
当 tray 气泡被点击的时候发出事件。
Event: 'balloon-closed' Windows
当 tray 气泡关闭的时候发出事件,因为超时或人为关闭。
Event: 'drop' macOS
当 tray icon 上的任何可拖动项被删除的时候发出事件。
Event: 'drop-files' macOS
eventfilesArray - 已删除文件的路径.
当 tray icon 上的可拖动文件被删除的时候发出事件。
Event: 'drag-enter' macOS
当一个拖动操作进入 tray icon 的时候发出事件。
Event: 'drag-leave' macOS
当一个拖动操作离开 tray icon 的时候发出事件。
Event: 'drag-end' macOS
当一个拖动操作在 tray icon 上或其它地方停止拖动的时候发出事件。
方法
Tray 模块有以下方法:
tray.destroy()
立刻删除 tray icon。
tray.setImage(image)
image(NativeImage | String)
让 image 与 tray icon 关联起来。
tray.setPressedImage(image) macOS
imageNativeImage
当在 macOS 上按压 tray icon 的时候,让 image 与 tray icon 关联起来。
tray.setToolTip(toolTip)
toolTipString
为 tray icon 设置 hover text。
tray.setTitle(title) macOS
titleString
在状态栏沿着 tray icon 设置标题。
tray.setHighlightMode(mode) macOS
modeString - Highlight mode with one of the following values:selection- Highlight the tray icon when it is clicked and also when its context menu is open. This is the default.always- Always highlight the tray icon.never- Never highlight the tray icon.
设置 tray icon 的背景色变为高亮(blue)。
注意: 你可以使用 highlightMode 和一个 BrowserWindow
通过在窗口可见性时切换 '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
optionsObjecticon(NativeImage | String) - (可选)titleString - (可选)contentString - (可选)
展示一个 tray balloon。
tray.popUpContextMenu([menu, position]) macOS Windows
menuMenu (optional)positionObject (可选) - 上托位置.xIntegeryInteger
从 tray icon 上托出 context menu。当划过 menu 的时候, menu 显示,代替 tray 的 context menu。
position 只在 windows 上可用,默认为 (0, 0)。
tray.setContextMenu(menu)
menuMenu
为这个 icon 设置 context menu。
tray.getBounds() macOS Windows
返回 Rectangle
这个 tray icon 的 bounds 对象。
tray.isDestroyed()
返回 Boolean - tray icon 是否销毁。