電子メールでコントロールを持つフレームレスウィンドウ

Question

私は、アプリケーションにタイトルバーがなくても、クローズ可能、ドラッグ可能、最小化、最大化、およびサイズ変更が可能です。私はOS Xでこれを行うことができます。というオプションがありますが、残念ながらそれは私が開発しているプラ​​ットフォームであるWindowsでは利用できません。hidden-insetというオプションがあります。 Windowsでこれをどうやってやるの？

Here's an example私が話していること。

Answer 1

ウィンドウクロムを必要としないと仮定すると、Electronの周りのフレームを削除し、残りをhtml/css/jsで埋めることでこれを達成できます。私はここに私のブログであなたが探しているものを達成する記事を書いた：http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/。あなたが始めるためのコードもここでホストされている：https://github.com/srakowski/ElectronLikeVS

を要約すると、あなたはフレームに合格する必要があります。

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

が続いて作成し、タイトルバーのためのコントロールボタンを追加します：あなたはBrowserWindowを作成するときに偽

JSでの最大/最小/クローズ機能で

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

バインド：

(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の特別なプロパティを使うために使います。

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

-webkit-アプリ領域：あなたはそれをドラッグすることができるようにあなたの「タイトルバー」領域にドラッグして、それを行いますこれらが重要であること

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

注：ここではいくつかの最小限のCSSですWindowsの場合と同じように。ノードラッグは、ドラッグされないようにボタンに適用されます。