苏南大叔和大家分享了,在electron使用frame:false创建无边框窗体的经验。今天我们要继续分享,在mac系统上做无边框窗体的几种特例。和frame:false相比较而言,在mac系统中,可以在隐藏边框的同时,保留交通灯按钮区域。就是说保留最大化按钮、最小化按钮、还原按钮。在mac系统下创建frameless窗体的时候,根据这交通灯的不同表现,分为以下四种情况。

frame:false

这个是最常见的情况,交通灯区域完全隐藏。截图及代码如下:

mainWindow = new BrowserWindow({frame:false})

苏南大叔:mac系统,electron创建无边框窗体的几种特殊方式 - frame_false
mac系统,electron创建无边框窗体的几种特殊方式(图6-1)

titleBarStyle: 'customButtonsOnHover', frame: false

这个效果customButtonsOnHover必须配合frame:false使用,如果frame:true或者未设置,那么就是展示最普通的有普通边框的情况哦。这个特例中,交通灯按钮是等鼠标移动上去之后,才会出现的。

mainWindow = new BrowserWindow({titleBarStyle: 'customButtonsOnHover', frame: false})

苏南大叔:mac系统,electron创建无边框窗体的几种特殊方式 - titlebar_onhover
mac系统,electron创建无边框窗体的几种特殊方式(图6-5)

苏南大叔:mac系统,electron创建无边框窗体的几种特殊方式 - titlebar_onhover_border_true
mac系统,electron创建无边框窗体的几种特殊方式(图6-6)

总结

大家可以参加这里的electronframeless文档,增加一下理解。

更多苏南大叔的electron文章,请点击这里。https://newsn.net/tag/electron/

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron    frameless

本站的忠实读者小伙伴,正在阅读下面这些文章: