Aller au contenu principal

Tray

Vue d'ensemble​

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

Sur MacOS et Ubuntu, la zone de notification sera située dans le coin supérieur droit de l'écran, à coté des icônes batterie et wifi. Sous Windows, la barre d'états se trouve généralement dans le coin inférieur droit.

Exemple​

main.js​

Nous devons d’abord importer app, Tray, Menu, nativeImage depuis electron.

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

Ensuite, nous allons créer notre 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)

  // note: votre code contextMenu, Tooltip and Title ira ici!
})

Génial! Maintenant nous pouvons commencer à attacher un menu contextuel à notre Tray, comme ceci:

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)

Le code ci-dessus créera 4 éléments distincts de type radio dans le menu contextuel. To read more about constructing native menus, click here.

Enfin, donnons à notre barre d’états une infobulle et un titre.

tray.setToolTip('Ceci est mon application')
tray.setTitle('Ceci est mon titre')

Conclusion​

Après avoir démarré votre application electron, vous devriez voir le Tray placé en soit haut soit en bas à droite de votre écran, selon votre système d'exploitation. fiddle docs/latest/fiddles/native-ui/tray