Tray

概要

This guide will take you through the process of creating a Tray icon with its own context menu to the system's notification area.

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

サンプル

main.js

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

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

次に Tray を作成します。 To do this, we will use a NativeImage icon, which can be created through any one of these methods. Note that we wrap our Tray creation code within an app.whenReady as we will need to wait for our electron app to finish initializing.

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 つで別々のラジオタイプのアイテムを作成します。 To read more about constructing native menus, click here.

最後に、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

おわりに