如何自定义Electron应用程序的窗口标题栏？

Question

我开始使用Electron来构建桌面应用程序。如何自定义窗口标题栏（包含关闭，最小化和全屏按钮）以添加自定义视图？ Safari浏览器是我想到的例子：

Answer 1

你只有在电子选择是建立一个无国界的窗口，然后创建CSS一个“假”的标题栏，包括任何你需要的UI元素。

电子/ WebKit的规定CSS属性，可以让你做出的任何元素可拖动，就像一个标题栏：

.titlebar { 
    -webkit-user-select: none; 
    -webkit-app-region: drag; 
} 

Answer 2

第一，和跨平台的选择是创建一个frameless window。第二个是仅限于macOS，并允许您隐藏标题栏，但保留窗口控件，允许添加自定义按钮。 例子：

const { BrowserWindow } = require('electron') 

// This will create a window without titlebar, allowing for customization 
let win = new BrowserWindow({ titleBarStyle: 'hidden' }) 
win.show() 

然后你可以使用CSS属性-webkit-user-select和-webkit-app-region指定阻力区。