Electron 如何给titlebar添加action按钮呢?
如图:
我想要添加几个按钮在titlebar中,这个titlebar是electron框架自带的,不是我们自己写的,请问如何添加呢?
更新1
我们见VSCode,这里就是在titleBar上添加自定义的按钮。这样的效果是怎么做到的呢?
回复
1个回答
test
2024-06-28
创建一个创建无边框窗口,然后在那个位置自己写一个标题栏。
毕竟在自定义中没有这样的选项。
更新 1:
你或许可以使用 Window Controls Overlay API(WICG、MDN、Electron)来实现该功能。
就像 WICG 的这张图那样,只有红框部分是浏览器提供的控件,其左边部分你可以自己写你想要的按钮。
效果图(来自 WICG):
更新 2:
我手头只有 Windows,你看它的 body
,正好缺了右上方一角:
而你看这个,这是一个设置了 display_override
包含 window-controls-overlay
的 PWA,它的 body
也是缺了那一块,所以我认为 VSCode 就是通过 Window Controls Overlay API 来实现的这样的效果。
有了答案之后再去搜索,发现 VSCode 确实在这里设置了属性,并在这里用包含 titleBarOverlay
的对象去初始化了窗口。这种方式和 Electron 文档上的第二个示例的使用方式是一样的:
// on Windows
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#2f3241',
symbolColor: '#74b1be',
height: 60
}
})
所以 VSCode 通过使用 Window Controls Overlay API 来实现你想要的效果。
看到你的评论,我就打开了 VSCode 的源码,但我发现我既读不懂又没时间读,所以我就换了一种方式,不过最终还是回到了源码。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容