Tray

概要

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

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

サンプル

main.js

まず electron から app、Tray、Menu、nativeImage をインポートしなければなりません。

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

概要​

サンプル​

main.js​

おわりに​

概要

サンプル

main.js

おわりに