Безрамное окно с элементами управления в электронном виде (Windows)

Предполагая, что вам не нужен оконный хром, вы можете сделать это, убрав рамку вокруг Electron и заполнив остальные html / css / js. Я написал статью о том, что вы ищете, в моем блоге здесь: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell / . Код, с которого можно начать, также размещен здесь: https://github.com/srakowski/ElectronLikeVS

Подводя итог, необходимо передать frame: false при создании BrowserWindow:

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

Затем создайте и добавьте кнопки управления для строки заголовка:

 <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>

Привязка в функциях max / min / close в 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 окно может быть хитрым, но ключ используют для использования специальных свойств из webkit. Вот некоторые минимальные 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;
}

Обратите внимание, что они важны:

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

-webkit-app-region: перетаскивание в область «строки заголовка» сделает это так, что Вы можете перетащить его, как это обычно бывает с окнами. Не перетаскивание применяется к кнопкам, чтобы они не вызывали перетаскивания.