Tray
A tray that can be used to display an icon and a menu in the system tray.
import { Tray } from '@mobrowser/api';
Example
import { app, Tray, Menu, MenuItem } from '@mobrowser/api';
const tray = new Tray({
tooltip: 'My App',
imagePath: app.getPath('appResources') + '/image.png',
menu: new Menu({
items: [
new MenuItem({
id: 'quit',
label: 'Quit',
action: (item: MenuItem) => {
app.quit()
}
})
]
})
})
tray.on('mouseUp', () => {
tray.openMenu()
})
Properties
title
readonly title: string;
The title of the tray.
tooltip
readonly tooltip: string;
The tooltip of the tray.
menu
readonly menu: Menu;
The menu of the tray.
destroyed
readonly destroyed: boolean;
Whether the tray is destroyed.
Methods
constructor()
constructor(options: TrayOptions): void;
Creates a new tray.
| Parameter | Type | Description |
|---|---|---|
options | TrayOptions | The options for constructing the tray. |
setTitle()
setTitle(title: string): void;
Sets the title of the tray.
| Parameter | Type | Description |
|---|---|---|
title | string | The title to set. |
setTooltip()
setTooltip(tooltip: string): void;
Sets the tooltip of the tray.
| Parameter | Type | Description |
|---|---|---|
tooltip | string | The tooltip of the tray. |
setImage()
setImage(image: FilePath | Image): void;
Sets the image of the tray.
The given image path must be a valid image file on the local file system.
The tray item can display a high resolution image on high resolution displays.
To do this, you need to provide a high resolution image file that must have
the same name as the regular image file, but with the @2x suffix. For example,
if the regular image file is image.png, then the high resolution image file
must be image@2x.png.
The following DPI suffixes are supported:
| Suffix | DPI density |
|---|---|
@1x | 100% |
@1.25x | 125% |
@1.5x | 150% |
@1.75x | 175% |
@2x | 200% |
In your application code, you just need to set the tray image using the path
to the basic image.png file only:
| Parameter | Type | Description |
|---|---|---|
image | FilePath | Image |
Example
import { app, Tray } from '@mobrowser/api';
const tray = new Tray({
imagePath: app.getPath('appResources') + '/image.png'
})
@param image The absolute path to the image on the local file
system or an Image instance.
setMenu()
setMenu(menu: Menu): void;
Sets the menu of the tray.
| Parameter | Type | Description |
|---|---|---|
menu | Menu | The menu to set for the tray. |
openMenu()
openMenu(): void;
Opens the menu of the tray.
closeMenu()
closeMenu(): void;
Closes the menu of the tray.
destroy()
destroy(): void;
Destroys the tray.
The tray stays in the system tray and keeps emitting events until this method is called, even if the app holds no reference to it.
Events
‘mouseUp’
on(event: 'mouseUp', listener: (mouseButton: MouseButton, keyModifiers: KeyModifiers) => void): void;
off(event: 'mouseUp', listener: (mouseButton: MouseButton, keyModifiers: KeyModifiers) => void): void;
Emitted when the mouse is released on the tray icon.
event: The event to listen for. listener: The callback function to be called when the event is triggered.
‘mouseDown’
on(event: 'mouseDown', listener: (mouseButton: MouseButton, keyModifiers: KeyModifiers) => void): void;
off(event: 'mouseDown', listener: (mouseButton: MouseButton, keyModifiers: KeyModifiers) => void): void;
Emitted when the mouse is pressed on the tray icon.
event: The event to listen for. listener: The callback function to be called when the event is triggered.