Saltar al contenido principal

Tray

Descripción general​

Esta guía le llevará a través del proceso de creación de un icono de bandeja con su propio menú contextual en el área de notificación del sistema.

En MacOS y Ubuntu, la bandeja se ubicará en la parte superior esquina derecha de tu pantalla, adyacente a tu batería y a los íconos WiFi. En Windows, la bandeja se ubicará normalmente en la esquina inferior derecha.

Ejemplo​

main.js​

Primero debemos importar app, Tray, Menu, nativeImage desde electron.

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

A continuación crearemos nuestra bandeja. Para hacer esto, utilizaremos un icono NativeImage, el cual puede ser creado mediante cualquiera de estos methods. Ten en cuenta que envolvemos nuestro código de creación de la bandeja dentro de un app.whenReady ya que necesitaremos esperar a que nuestra aplicación de electrón termine de inicializarse.

main.js
let tray

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

  // Nota: su código contextMenu, Tooltip y Title ¡irá aquí!
})

¡Genial! Ahora podemos empezar a adjuntar un menú contextual a nuestra bandeja, así:

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)

El código anterior creará 4 elementos de tipo radio separados en el menú contextual. Para leer más sobre la construcción de menús nativos, haz clic en aquí.

Por último, démosle a nuestra bandeja una información sobre herramientas y un título.

tray.setToolTip('Esta es mi aplicación')
tray.setTitle('Este es mi título')

Conclusión​

Después de iniciar la aplicación Electron, deberías ver la bandeja residiendo en la parte superior o inferior derecha de la pantalla, dependiendo de tu sistema operativo. fiddle docs/fiddles/native-ui/tray