如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

苏南大叔和大家分享了,在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: 'hidden'

这个把交通灯区域放置到了左上角。截图及代码如下:

mainWindow = new BrowserWindow({titleBarStyle: 'hidden'})

mac系统,electron创建无边框窗体的几种特殊方式 - titlebar_hidden
mac系统,electron创建无边框窗体的几种特殊方式(图6-2)

titleBarStyle: 'hiddenInset'

mainWindow = new BrowserWindow({titleBarStyle: 'hiddenInset'})
//mainWindow = new BrowserWindow({titleBarStyle: 'hidden-inset'})

mac系统,electron创建无边框窗体的几种特殊方式 - titlebar_hiddeninset
mac系统,electron创建无边框窗体的几种特殊方式(图6-3)

这个hiddenInset看上去和上边的hidden效果,看起来几乎没有区别。但是仔细对比一下,就可以看到区别。区别就是hiddenInset的交通灯按钮位置比hidden的交通灯位置靠下。如果用网页语言的css来解释的话,拿就是hiddenInset的line-height值比较大。下面是对比图。大家猜,哪个是hidden的效果?

mac系统,electron创建无边框窗体的几种特殊方式 - titlebar_hidden_inset_or_not
mac系统,electron创建无边框窗体的几种特殊方式(图6-4)

交通灯更加贴边的是hidden效果,另外的那个是hiddenInset的效果。另外,这个关键词的hiddenInset,也可以写成hidden-Inset,效果一样。在中文文档中,也是交替使用的。

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/

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

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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!