electron程序中,总是有人要隐藏原本的标题栏,然后自己模拟一个标题栏出来。那么在模拟这个标题栏的过程中,会用到几个非常罕见的css属性,在本文中,苏南大叔对这些罕见css属性做个总结。而且这里提前说一句,通过css模拟出来的标题栏,在win系统下面,右键就是有默认的系统菜单。无法屏蔽,无法屏蔽,无法屏蔽。除非不用这种css方式定义可拖动区域!

苏南大叔:electron程序,自定义标题栏的几个特殊css属性总结 - electron-bar-css
electron程序,自定义标题栏的几个特殊css属性总结(图3-1)

好了,下面进入正文。本文测试环境:macelectron@6.0.0。话说,这个electron都开始进入6时代了,太快了。本文中,描述的就是个极其粗糙的模拟标题栏的div,以及应用在这个模拟div上面的特殊css

-webkit-app-region: drag;

这个dragcss属性,就是这个需求中最基础最基础的关键解决方案了。在frame:falseelectron程序中,在渲染进程中定义了这条cssdom元素,就具有可以拖动的特性。当然,备受争议的win右键菜单,也是在这里出现的。

-webkit-app-region: drag

对应元素上,不能响应自定义鼠标事件。除了系统拖动功能外,还有双击全屏功能。在win下面,右键后,还会有特殊的系统菜单出现。

苏南大叔:electron程序,自定义标题栏的几个特殊css属性总结 - electron-bar-drag
electron程序,自定义标题栏的几个特殊css属性总结(图3-2)

相关文章

《electron 如何实现圆角不规则窗体?》

总结

对于模拟标题栏这件事来说,最简单的方案就是css定义drag了。但是涉及到无法解决的win下面的右键菜单问题,所以也许有人会选择electron-drag这个第三方库。

苏南大叔个人认为,鉴于编译第三方库的时候,极大概率会失败。所以,还是选用更保险的drag方案比较好些。更多electron相关经验文字,请点击苏南大叔的博客文章:

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

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

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

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

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