2021-04-29 07:56:31 +00:00
# Tray
2016-11-15 00:24:48 +00:00
## Class: Tray
2014-06-02 03:47:22 +00:00
2016-04-21 22:39:12 +00:00
> Add icons and context menus to the system's notification area.
2014-06-02 03:47:22 +00:00
2016-11-23 19:20:56 +00:00
Process: [Main ](../glossary.md#main-process )
2016-11-03 17:26:00 +00:00
2016-11-15 00:24:48 +00:00
`Tray` is an [EventEmitter][event-emitter].
2014-06-02 03:47:22 +00:00
```javascript
2018-09-13 16:10:51 +00:00
const { app, Menu, Tray } = require('electron')
2014-06-02 03:47:22 +00:00
2016-06-21 07:20:33 +00:00
let tray = null
2020-02-03 22:43:22 +00:00
app.whenReady().then(() => {
2016-06-21 07:20:33 +00:00
tray = new Tray('/path/to/my/icon')
2016-05-04 17:59:02 +00:00
const contextMenu = Menu.buildFromTemplate([
2018-09-13 16:10:51 +00:00
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' },
{ label: 'Item3', type: 'radio', checked: true },
{ label: 'Item4', type: 'radio' }
2016-07-26 01:39:25 +00:00
])
2016-06-21 07:20:33 +00:00
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
2016-06-21 07:13:50 +00:00
})
2014-06-02 03:47:22 +00:00
```
__Platform limitations:__
2015-08-29 05:46:39 +00:00
* On Linux the app indicator will be used if it is supported, otherwise
2014-06-02 15:18:14 +00:00
`GtkStatusIcon` will be used instead.
2015-07-21 03:27:24 +00:00
* On Linux distributions that only have app indicator support, you have to
2015-08-29 05:46:39 +00:00
install `libappindicator1` to make the tray icon work.
* App indicator will only be shown when it has a context menu.
2015-11-13 08:41:33 +00:00
* When app indicator is used on Linux, the `click` event is ignored.
2016-02-16 15:10:05 +00:00
* On Linux in order for changes made to individual `MenuItem` s to take effect,
you have to call `setContextMenu` again. For example:
2016-02-16 14:24:05 +00:00
```javascript
2018-09-13 16:10:51 +00:00
const { app, Menu, Tray } = require('electron')
2016-11-15 20:53:54 +00:00
let appIcon = null
2020-02-03 22:43:22 +00:00
app.whenReady().then(() => {
2016-11-15 20:53:54 +00:00
appIcon = new Tray('/path/to/my/icon')
const contextMenu = Menu.buildFromTemplate([
2018-09-13 16:10:51 +00:00
{ label: 'Item1', type: 'radio' },
{ label: 'Item2', type: 'radio' }
2016-11-15 20:53:54 +00:00
])
// 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)
})
2016-02-16 14:24:05 +00:00
```
2020-11-05 22:12:43 +00:00
2016-06-07 22:40:07 +00:00
* On Windows it is recommended to use `ICO` icons to get best visual effects.
2014-06-02 15:18:14 +00:00
2015-08-29 05:46:39 +00:00
If you want to keep exact same behaviors on all platforms, you should not
2015-11-13 08:41:33 +00:00
rely on the `click` event and always attach a context menu to the tray icon.
2014-06-02 03:47:22 +00:00
2020-01-31 05:37:03 +00:00
### `new Tray(image, [guid])`
2014-06-02 03:47:22 +00:00
2016-11-07 06:43:55 +00:00
* `image` ([NativeImage](native-image.md) | String)
2020-01-31 05:37:03 +00:00
* `guid` String (optional) _Windows_ - Assigns a GUID to the tray icon. If the executable is signed and the signature contains an organization in the subject line then the GUID is permanently associated with that signature. OS level settings like the position of the tray icon in the system tray will persist even if the path to the executable changes. If the executable is not code-signed then the GUID is permanently associated with the path to the executable. Changing the path to the executable will break the creation of the tray icon and a new GUID must be used. However, it is highly recommended to use the GUID parameter only in conjunction with code-signed executable. If an App defines multiple tray icons then each icon must use a separate GUID.
2014-06-02 03:47:22 +00:00
Creates a new tray icon associated with the `image` .
2016-06-21 07:20:33 +00:00
### Instance Events
2015-08-29 05:46:39 +00:00
The `Tray` module emits the following events:
2016-06-21 07:20:33 +00:00
#### Event: 'click'
2014-06-02 03:47:22 +00:00
2019-05-06 15:29:01 +00:00
Returns:
2019-02-19 09:24:19 +00:00
* `event` [KeyboardEvent ](structures/keyboard-event.md )
2017-11-29 10:38:35 +00:00
* `bounds` [Rectangle ](structures/rectangle.md ) - The bounds of tray icon.
* `position` [Point ](structures/point.md ) - The position of the event.
2015-05-01 09:54:22 +00:00
2014-06-02 03:47:22 +00:00
Emitted when the tray icon is clicked.
2016-06-21 07:20:33 +00:00
#### Event: 'right-click' _macOS_ _Windows_
2015-07-15 12:13:59 +00:00
2019-05-06 15:29:01 +00:00
Returns:
2019-02-19 09:24:19 +00:00
* `event` [KeyboardEvent ](structures/keyboard-event.md )
2017-11-29 10:38:35 +00:00
* `bounds` [Rectangle ](structures/rectangle.md ) - The bounds of tray icon.
2015-07-15 12:13:59 +00:00
Emitted when the tray icon is right clicked.
2016-06-21 07:20:33 +00:00
#### Event: 'double-click' _macOS_ _Windows_
2014-09-09 11:50:50 +00:00
2019-05-06 15:29:01 +00:00
Returns:
2019-02-19 09:24:19 +00:00
* `event` [KeyboardEvent ](structures/keyboard-event.md )
2017-11-29 10:38:35 +00:00
* `bounds` [Rectangle ](structures/rectangle.md ) - The bounds of tray icon.
2015-07-29 03:28:20 +00:00
Emitted when the tray icon is double clicked.
2016-06-21 07:20:33 +00:00
#### Event: 'balloon-show' _Windows_
2014-11-28 11:47:21 +00:00
Emitted when the tray balloon shows.
2016-06-21 07:20:33 +00:00
#### Event: 'balloon-click' _Windows_
2014-11-28 11:23:13 +00:00
Emitted when the tray balloon is clicked.
2016-06-21 07:20:33 +00:00
#### Event: 'balloon-closed' _Windows_
2014-11-28 11:47:21 +00:00
Emitted when the tray balloon is closed because of timeout or user manually
closes it.
2016-06-21 07:20:33 +00:00
#### Event: 'drop' _macOS_
2015-11-10 16:14:55 +00:00
Emitted when any dragged items are dropped on the tray icon.
2016-06-21 07:20:33 +00:00
#### Event: 'drop-files' _macOS_
2015-07-19 04:12:28 +00:00
2019-05-06 15:29:01 +00:00
Returns:
2016-06-20 23:51:31 +00:00
* `event` Event
2016-09-28 05:28:44 +00:00
* `files` String[] - The paths of the dropped files.
2015-07-19 04:12:28 +00:00
Emitted when dragged files are dropped in the tray icon.
2016-07-14 17:21:39 +00:00
#### Event: 'drop-text' _macOS_
2019-05-06 15:29:01 +00:00
Returns:
2016-07-14 17:21:39 +00:00
* `event` Event
2017-11-29 10:38:35 +00:00
* `text` String - the dropped text string.
2016-07-14 17:21:39 +00:00
Emitted when dragged text is dropped in the tray icon.
2016-06-21 07:20:33 +00:00
#### Event: 'drag-enter' _macOS_
2015-11-06 00:49:34 +00:00
Emitted when a drag operation enters the tray icon.
2016-06-21 07:20:33 +00:00
#### Event: 'drag-leave' _macOS_
2015-11-06 00:49:34 +00:00
Emitted when a drag operation exits the tray icon.
2016-06-21 07:20:33 +00:00
#### Event: 'drag-end' _macOS_
2015-11-10 16:14:55 +00:00
Emitted when a drag operation ends on the tray or ends at another location.
2020-01-17 16:28:34 +00:00
#### Event: 'mouse-up' _macOS_
Returns:
* `event` [KeyboardEvent ](structures/keyboard-event.md )
* `position` [Point ](structures/point.md ) - The position of the event.
Emitted when the mouse is released from clicking the tray icon.
Note: This will not be emitted if you have set a context menu for your Tray using `tray.setContextMenu` , as a result of macOS-level constraints.
#### Event: 'mouse-down' _macOS_
Returns:
* `event` [KeyboardEvent ](structures/keyboard-event.md )
* `position` [Point ](structures/point.md ) - The position of the event.
Emitted when the mouse clicks the tray icon.
2017-06-14 22:00:29 +00:00
#### Event: 'mouse-enter' _macOS_
2019-05-06 15:29:01 +00:00
Returns:
2019-02-19 09:24:19 +00:00
* `event` [KeyboardEvent ](structures/keyboard-event.md )
2017-11-29 10:38:35 +00:00
* `position` [Point ](structures/point.md ) - The position of the event.
2017-06-28 19:09:12 +00:00
2017-06-14 22:00:29 +00:00
Emitted when the mouse enters the tray icon.
2017-06-28 18:40:21 +00:00
#### Event: 'mouse-leave' _macOS_
2017-06-14 22:00:29 +00:00
2019-05-06 15:29:01 +00:00
Returns:
2019-02-19 09:24:19 +00:00
* `event` [KeyboardEvent ](structures/keyboard-event.md )
2017-11-29 10:38:35 +00:00
* `position` [Point ](structures/point.md ) - The position of the event.
2017-06-28 19:09:12 +00:00
2017-06-14 22:00:29 +00:00
Emitted when the mouse exits the tray icon.
2019-07-18 17:52:15 +00:00
#### Event: 'mouse-move' _macOS_ _Windows_
2017-08-26 18:04:58 +00:00
2019-05-06 15:29:01 +00:00
Returns:
2019-02-19 09:24:19 +00:00
* `event` [KeyboardEvent ](structures/keyboard-event.md )
2017-11-29 10:38:35 +00:00
* `position` [Point ](structures/point.md ) - The position of the event.
2017-08-26 18:04:58 +00:00
Emitted when the mouse moves in the tray icon.
2016-06-21 07:20:33 +00:00
### Instance Methods
2015-08-29 05:46:39 +00:00
2016-06-21 07:20:33 +00:00
The `Tray` class has the following methods:
2015-07-19 04:12:28 +00:00
2016-06-21 07:20:33 +00:00
#### `tray.destroy()`
2014-11-28 10:06:51 +00:00
Destroys the tray icon immediately.
2016-06-21 07:20:33 +00:00
#### `tray.setImage(image)`
2014-06-02 03:47:22 +00:00
2016-11-25 12:17:31 +00:00
* `image` ([NativeImage](native-image.md) | String)
2014-06-02 03:47:22 +00:00
Sets the `image` associated with this tray icon.
2016-06-21 07:20:33 +00:00
#### `tray.setPressedImage(image)` _macOS_
2014-06-02 03:47:22 +00:00
2018-07-30 01:11:23 +00:00
* `image` ([NativeImage](native-image.md) | String)
2014-06-02 03:47:22 +00:00
2016-06-18 13:26:26 +00:00
Sets the `image` associated with this tray icon when pressed on macOS.
2014-06-02 03:47:22 +00:00
2016-06-21 07:20:33 +00:00
#### `tray.setToolTip(toolTip)`
2014-06-02 03:47:22 +00:00
* `toolTip` String
2014-09-09 11:50:50 +00:00
Sets the hover text for this tray icon.
2020-08-23 21:39:29 +00:00
#### `tray.setTitle(title[, options])` _macOS_
2014-09-09 11:50:50 +00:00
* `title` String
2020-08-23 21:39:29 +00:00
* `options` Object (optional)
* `fontType` String (optional) - The font family variant to display, can be `monospaced` or `monospacedDigit` . `monospaced` is available in macOS 10.15+ and `monospacedDigit` is available in macOS 10.11+. When left blank, the title uses the default system font.
2014-09-09 11:50:50 +00:00
2019-03-18 19:40:34 +00:00
Sets the title displayed next to the tray icon in the status bar (Support ANSI colors).
#### `tray.getTitle()` _macOS_
Returns `String` - the title displayed next to the tray icon in the status bar
2014-09-09 11:50:50 +00:00
2018-04-02 01:28:44 +00:00
#### `tray.setIgnoreDoubleClickEvents(ignore)` _macOS_
* `ignore` Boolean
2018-04-17 05:00:38 +00:00
Sets the option to ignore double click events. Ignoring these events allows you
2018-04-02 01:28:44 +00:00
to detect every individual click of the tray icon.
This value is set to false by default.
2018-05-16 21:59:44 +00:00
#### `tray.getIgnoreDoubleClickEvents()` _macOS_
2018-05-03 08:02:56 +00:00
Returns `Boolean` - Whether double click events will be ignored.
2016-06-21 07:20:33 +00:00
#### `tray.displayBalloon(options)` _Windows_
2014-11-28 11:23:13 +00:00
* `options` Object
2019-08-08 21:43:33 +00:00
* `icon` ([NativeImage](native-image.md) | String) (optional) - Icon to use when `iconType` is `custom` .
* `iconType` String (optional) - Can be `none` , `info` , `warning` , `error` or `custom` . Default is `custom` .
2017-10-26 18:21:09 +00:00
* `title` String
* `content` String
2019-08-08 21:43:33 +00:00
* `largeIcon` Boolean (optional) - The large version of the icon should be used. Default is `true` . Maps to [`NIIF_LARGE_ICON`][NIIF_LARGE_ICON].
* `noSound` Boolean (optional) - Do not play the associated sound. Default is `false` . Maps to [`NIIF_NOSOUND`][NIIF_NOSOUND].
* `respectQuietTime` Boolean (optional) - Do not display the balloon notification if the current user is in "quiet time". Default is `false` . Maps to [`NIIF_RESPECT_QUIET_TIME`][NIIF_RESPECT_QUIET_TIME].
2014-11-28 11:23:13 +00:00
2015-05-04 03:23:09 +00:00
Displays a tray balloon.
2019-08-08 21:43:33 +00:00
[NIIF_NOSOUND]: https://docs.microsoft.com/en-us/windows/win32/api/shellapi/ns-shellapi-notifyicondataa#niif_nosound-0x00000010
[NIIF_LARGE_ICON]: https://docs.microsoft.com/en-us/windows/win32/api/shellapi/ns-shellapi-notifyicondataa#niif_large_icon-0x00000020
[NIIF_RESPECT_QUIET_TIME]: https://docs.microsoft.com/en-us/windows/win32/api/shellapi/ns-shellapi-notifyicondataa#niif_respect_quiet_time-0x00000080
2019-08-05 15:52:47 +00:00
#### `tray.removeBalloon()` _Windows_
Removes a tray balloon.
2019-08-09 14:43:48 +00:00
#### `tray.focus()` _Windows_
Returns focus to the taskbar notification area.
Notification area icons should use this message when they have completed their UI operation.
For example, if the icon displays a shortcut menu, but the user presses ESC to cancel it,
use `tray.focus()` to return focus to the notification area.
2016-06-21 07:20:33 +00:00
#### `tray.popUpContextMenu([menu, position])` _macOS_ _Windows_
2015-05-04 03:23:09 +00:00
2015-12-02 10:43:11 +00:00
* `menu` Menu (optional)
2017-04-03 22:35:39 +00:00
* `position` [Point ](structures/point.md ) (optional) - The pop up position.
2015-07-16 03:53:13 +00:00
2016-06-17 15:45:12 +00:00
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.
2015-12-02 10:43:11 +00:00
2015-07-16 03:53:13 +00:00
The `position` is only available on Windows, and it is (0, 0) by default.
2020-01-22 23:25:17 +00:00
#### `tray.closeContextMenu()` _macOS_ _Windows_
Closes an open context menu, as set by `tray.setContextMenu()` .
2016-06-21 07:20:33 +00:00
#### `tray.setContextMenu(menu)`
2014-06-02 03:47:22 +00:00
2018-08-27 16:58:47 +00:00
* `menu` Menu | null
2014-06-02 03:47:22 +00:00
2015-05-04 03:23:09 +00:00
Sets the context menu for this icon.
2014-09-09 11:50:50 +00:00
2016-06-21 07:20:33 +00:00
#### `tray.getBounds()` _macOS_ _Windows_
2016-06-21 07:13:50 +00:00
2016-10-08 02:09:31 +00:00
Returns [`Rectangle` ](structures/rectangle.md )
2016-06-21 07:13:50 +00:00
2016-09-24 23:59:30 +00:00
The `bounds` of this tray icon as `Object` .
2016-06-21 07:13:50 +00:00
2016-10-06 09:30:34 +00:00
#### `tray.isDestroyed()`
Returns `Boolean` - Whether the tray icon is destroyed.
2016-10-13 21:09:14 +00:00
[event-emitter]: https://nodejs.org/api/events.html#events_class_eventemitter