0
Electron의 Github에서 Tray Window 문제를 해결할 예정입니다.이 가이드에서는 창을 트레이 중앙에 배치하는 방법을 보여줍니다. 그 위에있는 스크린 샷 중 일부는 트레이 창이있는 사람과 그 트레이를 나타내는 화살표 (예 : so)를 보여줍니다. 하지만 나는 단지 this 같은 것을 얻고 있습니다.전자 창에서 위쪽 화살표를 만드는 방법은 무엇입니까?
var ids = [];
const {BrowserWindow,app,Tray} = require('electron');
var trayIcon = null;
const TRAY_ARROW_HEIGHT = 50; //px
const WINDOW_WIDTH = 400;
app.on('ready', function() {
const {screen} = require('electron')
window = new BrowserWindow({
width: WINDOW_WIDTH,
height: 420,
title: 'Hello World',
resizable: true,
frame: false,
transparent: true,
show: false
});
window.loadURL(`file://${__dirname}/main.html`);
window.on('close', function() {
window = null;
});
trayIcon = new Tray('tray.png');
trayIcon.on('click', function() {
var cursorPosition = screen.getCursorScreenPoint();
window.setPosition(cursorPosition.x - WINDOW_WIDTH/2, TRAY_ARROW_HEIGHT);
window.show();
window.focus();
});
window.on('blur', function() {
window.hide();
})
});
그리고 main.html :
html class="arrow_box">
<head>
<style>
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
</style>
</head>
<body>
<div>This should have an arrow</div>
</body>
</html>