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

篇首语：本文由小编为大家整理，主要介绍了如何自定义Electron应用程序的窗口标题栏？相关的知识，希望对你有一定的参考价值。

我开始使用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 customizationlet win = new BrowserWindow({ titleBarStyle: "hidden" })win.show()

然后你可以使用css属性-webkit-user-select和-webkit-app-region来指定拖动区域。

以上是关于如何自定义Electron应用程序的窗口标题栏？的主要内容，如果未能解决你的问题，请参考以下文章

• 联系人：佚名