在 Electron for MacOS 中自定义工具栏

Question

我一直在查看有关 MacOS 中工具栏自定义的 Electron 文档。默认工具栏只有 window 个按钮和页面标题，如下图。

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

任何想法都很好

Answer 1

你可以通过传递属性 titleBarStyle: hidden

来隐藏默认的

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

这将使标准 window 控件（红绿灯）保持在您的网页内容之上。

然后您可以“自定义”您自己的工具栏，方法是将 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