macos - 为 MacOS 自定义 Electron 中的工具栏

Question

我一直在寻找有关 MacOS 中工具栏自定义的 Electron 文档。默认工具栏只有窗口按钮和页面标题，如下图所示。

这是默认工具栏，我想插入一些按钮并对其进行自定义，因为它是 Swift 中的 NSToolbar。

任何想法都会很棒

标签： macoselectronnstoolbar

Answer 1

您可以通过传递道具titleBarStyle: hidden

const win = new BrowserWindow({ titleBarStyle: 'hidden' })

这会将标准窗口控件（交通灯）保留在您的网页内容之上。

然后，您可以通过将 html 元素定位在工具栏应该在的位置来“自定义”您自己的工具栏。

确保添加：

#menu-bar {
 ....
... 
-webkit-app-region: drag;
} 

到您的菜单栏元素。

https://www.electronjs.org/docs/api/frameless-window#hidden https://www.electronjs.org/docs/api/frameless-window#windows-control-overlay

或者您可以查看 custom-electron-titlebar 库

https://github.com/AlexTorresSk/custom-electron-titlebar