在 Electron js 中,当 frame: false 时,有办法显示菜单栏吗?

huangapple go评论81阅读模式
英文:

Is there a way to show menu bar when frame: false in Electron js?

问题

我正在尝试在Electron js中为Windows添加自定义标题栏。因此,为了隐藏默认的标题栏,我编写了以下代码:

mainWindow = new BrowserWindow({
    frame: false
});

但上面的代码也隐藏了菜单栏。我只想让默认的标题栏消失,而不影响菜单栏。是否有实现这一目标的方法?

英文:

I am trying to add custom title bar in Electron js for Windows. So to hide the default title bar I wrote:

mainWindow = new BrowserWindow({
    frame: false
});

But the above code hides the menu bar too. I want only the default title bar gone, without effecting the menu bar. Is there any way to achieve this?

答案1

得分: 0

设置 Electron 的 frame 选项为 false 会创建一个无边框窗口

无边框窗口没有标题栏或菜单。这被称为没有chrome

您可以在这里构建自定义标题栏,具有最小化、恢复、最大化和关闭按钮的功能。如果您的应用程序被设计为在不同操作系统上运行,则可能希望复制按钮位置、形状和功能。

不幸的是,使用无边框窗口的副作用是失去了本机菜单。同样,可以使用HTML、CSS和JS重新创建。但是,如果您再次希望模仿多个特定操作系统并忠实于其设计,这将需要一些工作。

或者,您可以在所有操作系统上运行相同风格的标题栏和菜单设计。选择权在您作为设计师手中。

总的来说,虽然可以实现上述所有内容,但正确设置它可能会耗费大量时间。因此,您确实需要权衡自定义标题栏是否值得实施所需的努力。

英文:

Setting Electron's frame option to false creates a frameless window.

A frameless window does not have a title bar or menu. This is known as having no chrome.

From here you can build your own custom title bar with minimise, restore, maximise and close button functionality. If your application is being designed to work on different Operating Systems then you may wish to replicate button position, shapes and functionality.

Unfortunately, a side effect of using a frameless window is that you do lose your native menu. Again, this can be re-created using HTML, CSS and JS. That said, it will require a bit of work if you again wish to mimic more than one particular Operating System and be true to its design.

Alternatively, you can run with the one style of title bar and menu design across all Operating Systems. The choice is yours as a designer.

In summary, whilst it is possible to implement all of the above, it can be time consuming to set it up correctly. As a result, you really do need to weigh up if a custom title bar is worth the effort required to implement.

huangapple
  • 本文由 发表于 2023年5月13日 18:09:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/76242176.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定