Elétron - Bandeja do Sistema
A bandeja do sistema é um menu fora da janela do aplicativo. No MacOS e no Ubuntu, ele está localizado no canto superior direito da tela. No Windows, está no canto inferior direito. Podemos criar menus para nossa aplicação nas bandejas do sistema usando Electron.
Crie um novo main.jsarquivo e adicione o seguinte código a ele. Tenha um arquivo png pronto para usar no ícone da bandeja do 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)Depois de configurar uma janela básica do navegador, criaremos um novo index.html arquivo com o seguinte conteúdo -
<!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>Criamos a bandeja usando o submódulo Bandeja. Em seguida, criamos um menu usando um modelo e anexamos o menu ao nosso objeto de bandeja.
Execute o aplicativo usando o seguinte comando -
$ electron ./main.jsAo executar o comando acima, verifique na bandeja do sistema o ícone usado. Usei um rosto sorridente para a minha candidatura. O comando acima irá gerar a seguinte saída -
