首页 > 解决方案 > Electron 应用程序 - 本机标头中的自定义组件

问题描述

在 Electron 中是否可以将自定义组件放入本机应用程序标头中?

例如,要实现这样的设计:

在此处输入图像描述

目前我的应用程序只有一个默认的,只有标题文本

在此处输入图像描述

有没有办法让它变大并将内容放在那里?还是我必须以某种方式隐藏本机标题并自己重新创建本机按钮?

我怀疑是后者,但在这种情况下,我如何隐藏原生并连接拖动窗口的能力?

还是这种设计在 Electron 中完全不可能?

标签: electron

解决方案


您正在寻找的设计可以实现,但只能在 macOS 上,通过在传递给new BrowserWindow()titleBarStyle的选项中使用设置为hiddenhiddenInset甚至的属性。customButtonsOnHover

这在 macOS 上的替代品中有更详细的解释:

有另一种指定无镶边窗口的方法。您可能希望隐藏标题栏并将您的内容扩展到完整的窗口大小,而不是设置frame为禁用标题栏和窗口控件,但仍保留标准窗口操作的窗口控件(“交通灯”)。false

可能仍然存在一些问题,例如无法再从标题栏拖动窗口,但它们已记录在无框窗口页面中;例如,可以通过添加-webkit-app-region: drag;相对于您希望使其可拖动的区域的 CSS 来解决这个特定问题。


推荐阅读