Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: added guide and updated docs for Tray (#29964)
* docs: added guide and updated docs for Tray (#29385) (#29762) * docs: added guide and updated docs for Tray * docs: improve clarity * docs: fix frontmatter for Tray tutorial (#29788) Co-authored-by: George Xu <33054982+georgexu99@users.noreply.github.com>
- Loading branch information
1 parent
2a3aa7e
commit d27adae
Showing
4 changed files
with
98 additions
and
188 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
--- | ||
title: Tray | ||
description: This guide will take you through the process of creating | ||
a Tray icon with its own context menu to the system's notification area. | ||
slug: tray | ||
hide_title: true | ||
--- | ||
|
||
# Tray | ||
|
||
## Overview | ||
|
||
<!-- ✍ Update this section if you want to provide more details --> | ||
|
||
This guide will take you through the process of creating a | ||
[Tray](https://www.electronjs.org/docs/api/tray) icon with | ||
its own context menu to the system's notification area. | ||
|
||
On MacOS and Ubuntu, the Tray will be located on the top | ||
right corner of your screen, adjacent to your battery and wifi icons. | ||
On Windows, the Tray will usually be located in the bottom right corner. | ||
|
||
## Example | ||
|
||
### main.js | ||
|
||
First we must import `app`, `Tray`, `Menu`, `nativeImage` from `electron`. | ||
|
||
```js | ||
const { app, Tray, Menu, nativeImage } = require('electron') | ||
``` | ||
|
||
Next we will create our Tray. To do this, we will use a | ||
[`NativeImage`](https://www.electronjs.org/docs/api/native-image) icon, | ||
which can be created through any one of these | ||
[methods](https://www.electronjs.org/docs/api/native-image#methods). | ||
Note that we wrap our Tray creation code within an | ||
[`app.whenReady`](https://www.electronjs.org/docs/api/app#appwhenready) | ||
as we will need to wait for our electron app to finish initializing. | ||
|
||
```js title='main.js' | ||
let tray | ||
|
||
app.whenReady().then(() => { | ||
const icon = nativeImage.createFromPath('path/to/asset.png') | ||
tray = new Tray(icon) | ||
|
||
// note: your contextMenu, Tooltip and Title code will go here! | ||
}) | ||
``` | ||
|
||
Great! Now we can start attaching a context menu to our Tray, like so: | ||
|
||
```js | ||
const contextMenu = Menu.buildFromTemplate([ | ||
{ label: 'Item1', type: 'radio' }, | ||
{ label: 'Item2', type: 'radio' }, | ||
{ label: 'Item3', type: 'radio', checked: true }, | ||
{ label: 'Item4', type: 'radio' } | ||
]) | ||
|
||
tray.setContextMenu(contextMenu) | ||
``` | ||
|
||
The code above will create 4 separate radio-type items in the context menu. | ||
To read more about constructing native menus, click | ||
[here](https://www.electronjs.org/docs/api/menu#menubuildfromtemplatetemplate). | ||
|
||
Finally, let's give our tray a tooltip and a title. | ||
|
||
```js | ||
tray.setToolTip('This is my application') | ||
tray.setTitle('This is my title') | ||
``` | ||
|
||
## Conclusion | ||
|
||
After you start your electron app, you should see the Tray residing | ||
in either the top or bottom right of your screen, depending on your | ||
operating system. | ||
|
||
```fiddle docs/fiddles/native-ui/tray | ||
``` |