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
|
2016-06-21 07:13:50 +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([
|
2016-05-10 17:15:09 +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
|
2016-11-15 20:53:54 +00:00
|
|
|
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)
|
|
|
|
})
|
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
|
|
|
|
2015-07-29 06:27:32 +00:00
|
|
|
* `event` Event
|
|
|
|
* `altKey` Boolean
|
|
|
|
* `shiftKey` Boolean
|
|
|
|
* `ctrlKey` Boolean
|
2015-07-29 06:44:08 +00:00
|
|
|
* `metaKey` Boolean
|
2016-10-08 02:09:31 +00:00
|
|
|
* `bounds` [Rectangle](structures/rectangle.md) - The bounds of tray icon
|
2017-08-26 18:04:58 +00:00
|
|
|
* `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
|
|
|
|
2015-07-29 06:27:32 +00:00
|
|
|
* `event` Event
|
|
|
|
* `altKey` Boolean
|
|
|
|
* `shiftKey` Boolean
|
|
|
|
* `ctrlKey` Boolean
|
2015-07-29 06:44:08 +00:00
|
|
|
* `metaKey` Boolean
|
2016-10-08 02:09:31 +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
|
|
|
|
2015-07-29 06:27:32 +00:00
|
|
|
* `event` Event
|
|
|
|
* `altKey` Boolean
|
|
|
|
* `shiftKey` Boolean
|
|
|
|
* `ctrlKey` Boolean
|
2015-07-29 06:44:08 +00:00
|
|
|
* `metaKey` Boolean
|
2016-10-08 02:09:31 +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
|
|
|
|
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_
|
|
|
|
|
|
|
|
* `event` Event
|
|
|
|
* `text` String - the dropped text string
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
2017-06-14 22:00:29 +00:00
|
|
|
#### Event: 'mouse-enter' _macOS_
|
|
|
|
|
2017-06-28 19:09:12 +00:00
|
|
|
* `event` Event
|
|
|
|
* `altKey` Boolean
|
|
|
|
* `shiftKey` Boolean
|
|
|
|
* `ctrlKey` Boolean
|
|
|
|
* `metaKey` Boolean
|
|
|
|
* `position` [Point](structures/point.md) - The position of the event
|
|
|
|
|
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
|
|
|
|
2017-06-28 19:09:12 +00:00
|
|
|
* `event` Event
|
|
|
|
* `altKey` Boolean
|
|
|
|
* `shiftKey` Boolean
|
|
|
|
* `ctrlKey` Boolean
|
|
|
|
* `metaKey` Boolean
|
|
|
|
* `position` [Point](structures/point.md) - The position of the event
|
|
|
|
|
2017-06-14 22:00:29 +00:00
|
|
|
Emitted when the mouse exits the tray icon.
|
|
|
|
|
2017-08-26 18:04:58 +00:00
|
|
|
#### Event: 'mouse-move' _macOS_
|
|
|
|
|
|
|
|
* `event` Event
|
|
|
|
* `altKey` Boolean
|
|
|
|
* `shiftKey` Boolean
|
|
|
|
* `ctrlKey` Boolean
|
|
|
|
* `metaKey` Boolean
|
|
|
|
* `position` [Point](structures/point.md) - The position of the event
|
|
|
|
|
|
|
|
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
|
|
|
|
2015-02-12 05:52:28 +00:00
|
|
|
* `image` [NativeImage](native-image.md)
|
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
|
|
|
|
|
|
|
|
Sets the title displayed aside of the tray icon in the status bar.
|
|
|
|
|
2016-07-26 20:59:19 +00:00
|
|
|
#### `tray.setHighlightMode(mode)` _macOS_
|
2014-09-09 11:50:50 +00:00
|
|
|
|
2016-08-26 00:26:57 +00:00
|
|
|
* `mode` String - Highlight mode with one of the following values:
|
2016-08-25 21:43:06 +00:00
|
|
|
* `selection` - Highlight the tray icon when it is clicked and also when
|
2016-07-26 20:59:19 +00:00
|
|
|
its context menu is open. This is the default.
|
2016-08-25 21:43:06 +00:00
|
|
|
* `always` - Always highlight the tray icon.
|
|
|
|
* `never` - Never highlight the tray icon.
|
2014-09-09 11:50:50 +00:00
|
|
|
|
2016-07-26 20:59:19 +00:00
|
|
|
Sets when the tray's icon background becomes highlighted (in blue).
|
2014-09-09 11:50:50 +00:00
|
|
|
|
2016-07-27 20:35:13 +00:00
|
|
|
**Note:** You can use `highlightMode` with a [`BrowserWindow`](browser-window.md)
|
|
|
|
by toggling between `'never'` and `'always'` modes when the window visibility
|
|
|
|
changes.
|
|
|
|
|
2016-08-16 21:50:21 +00:00
|
|
|
```javascript
|
2016-07-27 22:23:26 +00:00
|
|
|
const {BrowserWindow, Tray} = require('electron')
|
|
|
|
|
|
|
|
const win = new BrowserWindow({width: 800, height: 600})
|
|
|
|
const tray = new Tray('/path/to/my/icon')
|
2016-07-27 22:56:00 +00:00
|
|
|
|
|
|
|
tray.on('click', () => {
|
|
|
|
win.isVisible() ? win.hide() : win.show()
|
|
|
|
})
|
2016-07-27 20:35:13 +00:00
|
|
|
win.on('show', () => {
|
|
|
|
tray.setHighlightMode('always')
|
|
|
|
})
|
|
|
|
win.on('hide', () => {
|
|
|
|
tray.setHighlightMode('never')
|
|
|
|
})
|
|
|
|
```
|
|
|
|
|
2016-06-21 07:20:33 +00:00
|
|
|
#### `tray.displayBalloon(options)` _Windows_
|
2014-11-28 11:23:13 +00:00
|
|
|
|
|
|
|
* `options` Object
|
2017-11-28 17:15:15 +00:00
|
|
|
* `icon` ([NativeImage](native-image.md) | String) (optional) -
|
2017-10-26 18:21:09 +00:00
|
|
|
* `title` String
|
|
|
|
* `content` String
|
2014-11-28 11:23:13 +00:00
|
|
|
|
2015-05-04 03:23:09 +00:00
|
|
|
Displays a tray balloon.
|
|
|
|
|
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
|
|
|
|
|
|
|
* `menu` Menu
|
|
|
|
|
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
|