Add icons and context menus to the system’s notification area.
Process: Main
Tray
is an 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)
})
Platform limitations:
GtkStatusIcon
will be used instead.libappindicator1
to make the tray icon work.click
event is ignored.MenuItem
s to take effect, you have to call setContextMenu
again. For example: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)
})
ICO
icons to get best visual effects.If you want to keep exact same behaviors on all platforms, you should not rely on the click
event and always attach a context menu to the tray icon.
new Tray(image)
image
(NativeImage | String)Creates a new tray icon associated with the image
.
The Tray
module emits the following events:
event
Event
altKey
BooleanshiftKey
BooleanctrlKey
BooleanmetaKey
Booleanbounds
Rectangle - The bounds of tray iconEmitted when the tray icon is clicked.
event
Event
altKey
BooleanshiftKey
BooleanctrlKey
BooleanmetaKey
Booleanbounds
Rectangle - The bounds of tray iconEmitted when the tray icon is right clicked.
event
Event
altKey
BooleanshiftKey
BooleanctrlKey
BooleanmetaKey
Booleanbounds
Rectangle - The bounds of tray iconEmitted when the tray icon is double clicked.
Emitted when the tray balloon shows.
Emitted when the tray balloon is clicked.
Emitted when the tray balloon is closed because of timeout or user manually closes it.
Emitted when any dragged items are dropped on the tray icon.
event
Eventfiles
String[] - The paths of the dropped files.Emitted when dragged files are dropped in the tray icon.
event
Eventtext
String - the dropped text stringEmitted when dragged text is dropped in the tray icon.
Emitted when a drag operation enters the tray icon.
Emitted when a drag operation exits the tray icon.
Emitted when a drag operation ends on the tray or ends at another location.
event
Event
altKey
BooleanshiftKey
BooleanctrlKey
BooleanmetaKey
Booleanposition
Point - The position of the eventEmitted when the mouse enters the tray icon.
event
Event
altKey
BooleanshiftKey
BooleanctrlKey
BooleanmetaKey
Booleanposition
Point - The position of the eventEmitted when the mouse exits the tray icon.
The Tray
class has the following methods:
tray.destroy()
Destroys the tray icon immediately.
tray.setImage(image)
image
(NativeImage | String)Sets the image
associated with this tray icon.
tray.setPressedImage(image)
macOSimage
NativeImageSets the image
associated with this tray icon when pressed on macOS.
tray.setToolTip(toolTip)
toolTip
StringSets the hover text for this tray icon.
tray.setTitle(title)
macOStitle
StringSets the title displayed aside of the tray icon in the status bar.
tray.setHighlightMode(mode)
macOSmode
String - 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.Sets when the tray’s icon background becomes highlighted (in blue).
Note: You can use highlightMode
with a BrowserWindow
by toggling between 'never'
and 'always'
modes when the window visibility changes.
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)
Windowsoptions
Object
icon
(NativeImage | String) - (optional)title
String - (optional)content
String - (optional)Displays a tray balloon.
tray.popUpContextMenu([menu, position])
macOS Windowsmenu
Menu (optional)position
Point (optional) - The pop up position.Pops up the context menu of the tray icon. When menu
is passed, the menu
will be shown instead of the tray icon’s context menu.
The position
is only available on Windows, and it is (0, 0) by default.
tray.setContextMenu(menu)
menu
MenuSets the context menu for this icon.
tray.getBounds()
macOS WindowsReturns Rectangle
The bounds
of this tray icon as Object
.
tray.isDestroyed()
Returns Boolean
- Whether the tray icon is destroyed.