Electron 无边框界面 | 幸福的猪窝

Electron 无边框界面

Electron应用默认有一个浏览器的标题栏,多少看上去都有些不爽,隐藏掉默认浏览器的标题栏及边框方法很简单。

隐藏窗口

创建窗口时通过参数 frame 就可以控制是否显示。示例:

1
2
3
win = new BrowserWindow({width:1800,height:600,frame:false});
// frame : true 显示边框,默认值
// frame : false 不显示边框

通过这个参数很容易实现无边框的界面。但是发现窗口无法拖动了。就傻傻的待在启动的位置。这就尴尬了。想关闭都麻烦。于是就有了下面的设置方法。

通过样式设置界面的可拖动区域

electron通过一个样式来确定区域是否可以拖动 -webkit-app-region。 这个样式有两个值分别是 dragno-drag。通过设置不同值控制区域是否可以拖拽。

样例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 可以拖拽区域,主要使用在需要响应鼠标拖拽的区域上。
*/
.dragRegion{
-webkit-app-region: drag;
}

/**
* 不可以拖拽区域,在设置了可拖拽区域的控件内部对于鼠标的点击等事件均不响应。
* 所以这个范围内如果有按钮等控件需要设置,保证控件的正常功能。
*/
.noDragRegion{
-webkit-app-region: no-drag;
}