メインコンテンツへ飛ぶ

Tray

概要

このガイドでは、システムの通知エリアにそれ独自のコンテキストメニューがある Tray アイコンを作成する手順を一緒に見ていきます。

MacOS および Ubuntu では、Tray は画面の右上に位置し、バッテリーや Wi-Fi のアイコンと隣接します。 Windows の Tray は通常、右下に位置します。

サンプル

main.js

まず electron から appTrayMenunativeImage をインポートしなければなりません。

const { app, Tray, Menu, nativeImage } = require('electron')

次に Tray を作成します。 このために、NativeImage アイコンを使用することにします。これはいずれかの メソッド で作成できます。 Tray の作成コードを app.whenReady で囲んでいるのは、Electron アプリの初期化完了を待つ必要があるからです。

main.js
let tray

app.whenReady().then(() => {
const icon = nativeImage.createFromPath('path/to/asset.png')
tray = new Tray(icon)

// 注釈: contextMenu、Tooltip、Title のコードはこちらで!
})

これでうまくいきました。 それでは以下のように Tray へコンテキストメニューを付けていきます。

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)

上記のコードは、コンテキストメニューに 4 つで別々のラジオタイプのアイテムを作成します。 ネイティブメニューの構築についてご覧になりたい方は、こちら をクリックしてください。

最後に、Tray にツールチップとタイトルを入れましょう。

tray.setToolTip('This is my application')
tray.setTitle('This is my title')

おわりに

Electron アプリを起動すると、オペレーティングシステムに応じて、画面の右上や右下に Tray が表示されます。 fiddle docs/latest/fiddles/native-ui/tray