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

Posted 2021-04-08

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

答案

你在Electron中唯一的选择是创建一个frameless（又名无边框）窗口，然后用CSS创建一个“假”标题栏，包括你需要的任何UI元素。

Electron / webkit提供了CSS属性，允许您使任何元素可拖动，如标题栏：

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

另一答案

第一个和跨平台选项是创建一个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来指定拖动区域。