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
2016-05-04 17:59:02 +00:00
app.on('ready', () => {
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
app.on('ready', () => {
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
```
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
2015-08-29 05:46:39 +00:00
### `new Tray(image)`
2014-06-02 03:47:22 +00:00
2016-11-07 06:43:55 +00:00
* `image` ([NativeImage](native-image.md) | String)
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.
2016-06-21 07:20:33 +00:00
#### `tray.setTitle(title)` _macOS_
2014-09-09 11:50:50 +00:00
* `title` String
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.
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