带有电子控件的无框窗口(Windows) [英] Frameless window with controls in electron (Windows)

问题描述

我希望我的应用没有标题栏，但仍然可以像常规窗口一样关闭、拖动、最小化、最大化和调整大小.我可以在 OS X 中做到这一点，因为有一个 [titleBarStyle] .帮助您入门的代码也托管在此处:https://github.com/srakowski/ElectronLikeVSp>

总结一下，创建BrowserWindow的时候需要传入frame: false:

mainWindow = new BrowserWindow({width: 800, height: 600, frame: false});

然后为您的标题栏创建和添加控制按钮:

 <div id="title-bar"><div id="title">我的代码人生</div><div id="title-bar-btns"><button id="min-btn">-</button><button id="max-btn">+</button><button id="close-btn">x</button></div></div>

在js中绑定max/min/close函数:

(function () {var remote = require('remote');var BrowserWindow = remote.require('浏览器窗口');函数初始化(){document.getElementById("min-btn").addEventListener("click", function (e) {var window = BrowserWindow.getFocusedWindow();window.minimize();});document.getElementById("max-btn").addEventListener("click", function (e) {var window = BrowserWindow.getFocusedWindow();窗口.最大化()；});document.getElementById("close-btn").addEventListener("click", function (e) {var window = BrowserWindow.getFocusedWindow();窗口.close();});};document.onreadystatechange = function () {如果(document.readyState ==完成"){在里面();}};})();

设置窗口样式可能很棘手，但关键是使用 webkit 的特殊属性.这是一些最小的 CSS:

正文{填充:0px；边距:0px；}#标题栏 {-webkit-app-region:拖动；高度:24px；背景颜色:深紫色；填充:无；边距:0px；}#标题 {位置:固定；顶部:0px；左:6px；}#title-bar-btns {-webkit-app-region:无拖动；位置:固定；顶部:0px；右:6px；}

请注意，这些很重要:

-webkit-app-region:拖动；-webkit-app-region:无拖动；

-webkit-app-region: 在你的标题栏"区域上拖动会成功，这样你就可以像窗口一样拖动它.no-drag 应用于按钮，因此它们不会导致拖动.

I want my app to have no title bar but still be closeable, draggable, minimizable, maximizable, and resizable like a regular window. I can do this in OS X since there is a [titleBarStyle] 1 option called hidden-inset that I can use but unfortunately, it's not available for Windows, which is the platform that I'm developing for. How would I go about doing something like this in Windows?

Above is an example of what I'm talking about.

解决方案

Assuming you don't want window chrome, you can accomplish this by removing the frame around Electron and filling the rest in with html/css/js. I wrote an article that achieves what you are looking for on my blog here: http://mylifeforthecode.github.io/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Code to get you started is also hosted here: https://github.com/srakowski/ElectronLikeVS

To summarize, you need to pass frame: false when you create the BrowserWindow:

mainWindow = new BrowserWindow({width: 800, height: 600, frame: false});

Then create and add control buttons for your title bar:

 <div id="title-bar">
      <div id="title">My Life For The Code</div>
      <div id="title-bar-btns">
           <button id="min-btn">-</button>
           <button id="max-btn">+</button>
           <button id="close-btn">x</button>
      </div>
 </div>

Bind in the max/min/close functions in js:

(function () {

      var remote = require('remote'); 
      var BrowserWindow = remote.require('browser-window'); 

     function init() { 
          document.getElementById("min-btn").addEventListener("click", function (e) {
               var window = BrowserWindow.getFocusedWindow();
               window.minimize(); 
          });

          document.getElementById("max-btn").addEventListener("click", function (e) {
               var window = BrowserWindow.getFocusedWindow(); 
               window.maximize(); 
          });

          document.getElementById("close-btn").addEventListener("click", function (e) {
               var window = BrowserWindow.getFocusedWindow();
               window.close();
          }); 
     }; 

     document.onreadystatechange = function () {
          if (document.readyState == "complete") {
               init(); 
          }
     };

})();

Styling the window can be tricky, but the key use to use special properties from webkit. Here is some minimal CSS:

body {
 padding: 0px;
 margin: 0px; 
}

#title-bar {
 -webkit-app-region: drag;
 height: 24px; 
 background-color: darkviolet;
 padding: none;
 margin: 0px; 
}

#title {
 position: fixed;
 top: 0px;
 left: 6px; 
}

#title-bar-btns {
 -webkit-app-region: no-drag;
 position: fixed;
 top: 0px;
 right: 6px;
}

Note that these are important:

-webkit-app-region: drag;
-webkit-app-region: no-drag;

-webkit-app-region: drag on your 'title bar' region will make it so that you can drag it around as is common with windows. The no-drag is applied to the buttons so that they do not cause dragging.

这篇关于带有电子控件的无框窗口(Windows)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！