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

предполагая, что вы не хотите window chrome, вы можете сделать это, удалив кадр вокруг 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>

Bind в функциях 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(); 
          }
     };

})();

стиль окна может быть сложным, но использование ключа для использования специальных свойств из 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: перетащите на "заголовок" область сделает это так что вы можете перетащить его вокруг, как это принято в Windows. Без перетаскивания применяется к кнопкам, так что они не вызывают перетаскивания.