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

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

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

打赏任意金额,发送截图到邮箱 shang@newsn.net ,可以领取精选回馈如下(任选其一):
  • 《前端视频教程大礼包》一套
  • 《wordpress精选皮肤》一套
  • 《dedecms织梦精选模板》一套
感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!

岁月静好

关注互联网发展,关注苏南大叔的《程序如此灵动~》博客
本文章来自:程序如此灵动~
博客地址为:https://newsn.net/
原文地址为:https://newsn.net/say/electron-frameless-mac.html
上一篇好文:electron如何创建无边框窗体
下一篇好文:如何实现electron窗体透明效果

如果您转载了本文章,出于某种原因,并没有注明作者或者出处。
在这里,苏南大叔也表示理解和支持。因为苏南大叔深深地明白:
您会在合适的时机,合适的地方,给本博客一个外链。对吧?
您若开心,便是安好!岁月静好,但愿世界和平,没有纷争~