Question

我试图涉足电子，我试图在标题栏中放置一个表格。

我接受我可能必须使它成为一个无框窗口，然后添加我自己的自定义HTML和样式。

我是语言的新手，所以这就是我所知道的。

最好的方法是什么？

Answer 1

请阅读frameless windows。在那里，它将教你如何使用HTML和CSS制作一个自定义标题栏，其中一个小例子：

main.js

const {BrowserWindow} = require('electron');
let win = new BrowserWindow({ width: 800, height: 600, frame: false });
win.loadURL(`file://${__dirname}/index.html`);
win.show();

index.html

<body>
  <div style="-webkit-app-region: drag" id="titlebar">
    <input type="text" /> <!-- this is your input in the titlebar -->
  </div>
  <div id="content">your content here</div>
</body>

使用-webkit-app-region: drag使元素可拖动（请注意，目前仅支持矩形形状。）

其余的由你来决定你喜欢的风格！
如果您想让它看起来像本机应用，可以查看reactdesktop。

电子 - 标题栏中的用户输入

1 个答案: