Question

我正在关于Electron的Github上的Tray Window问题，该问题展示了如何使窗口以托盘为中心。其中的一些屏幕截图显示人们有一个托盘窗口和一个指示托盘的顶部箭头，如so。但我只得到像this这样的东西。这是代码（main.js）：

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>

Answer 1

更改.arrow-box上边框的尺寸以匹配border-width中的.arrow_box:after，将为您显示箭头。

.arrow_box { position: relative; background: #88b7d5; border: 30px solid #c2e1f5; }

如何在Electron窗口上制作顶部箭头？

1 个答案: