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. 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. 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/latest/fiddles/native-ui/tray