Electron - Bandeja del sistema
La bandeja del sistema es un menú fuera de la ventana de la aplicación. En MacOS y Ubuntu, se encuentra en la esquina superior derecha de la pantalla. En Windows, está en la esquina inferior derecha. Podemos crear menús para nuestra aplicación en bandejas del sistema usando Electron.
Crear un nuevo main.jsarchivo y agregue el siguiente código. Tenga un archivo png listo para usar para el icono de la bandeja del sistema.
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)Después de haber configurado una ventana básica del navegador, crearemos una nueva index.html archivo con el siguiente contenido -
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Menus</title>
</head>
<body>
<script type = "text/javascript">
const {remote} = require('electron')
const {Tray, Menu} = remote
const path = require('path')
let trayIcon = new Tray(path.join('','/home/ayushgp/Desktop/images.png'))
const trayMenuTemplate = [
{
label: 'Empty Application',
enabled: false
},
{
label: 'Settings',
click: function () {
console.log("Clicked on settings")
}
},
{
label: 'Help',
click: function () {
console.log("Clicked on Help")
}
}
]
let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
trayIcon.setContextMenu(trayMenu)
</script>
</body>
</html>Creamos la bandeja usando el submódulo Tray. Luego creamos un menú usando una plantilla y luego adjuntamos el menú a nuestro objeto de bandeja.
Ejecute la aplicación usando el siguiente comando:
$ electron ./main.jsCuando ejecute el comando anterior, verifique en la bandeja del sistema el icono que utilizó. Usé una carita sonriente para mi solicitud. El comando anterior generará la siguiente salida:
