Elektron kontrolleri olan çerçevesiz pencere (Windows)

Question

Uygulamamın başlık çubuğunun olmamasını, ancak yine de normal bir pencere gibi kapatılabilir, sürüklenebilir, en aza indirgenebilir, en üst düzeye çıkarılabilir ve yeniden boyutlandırılabilir olmasını istiyorum. Bunu kullanabildiğim için hidden-inset olarak adlandırılan bir seçenek var çünkü OS X'de bunu yapabilirim ama maalesef Windows için uygun değil, bu platform için geliştiriyorum. Windows'da böyle bir şey yapmaya nasıl giderim? Ne hakkında konuştuğumun

Here's an example.

Answer 1

Pencere kromu istemediğinizi varsayarak bunu, elektron etrafındaki çerçeveyi çıkararak ve gerisini html/css/js ile doldurarak yapabilirsiniz. Blogumda aradığınızı bulan bir makale yazdım: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Başlamak için Kod burada da barındırılan: https://github.com/srakowski/ElectronLikeVS

özetlemek için, çerçeveyi geçmesi gerekiyor:

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

Sonra oluşturmak ve başlık çubuğu için kontrol düğmeleri ekleyin: Eğer BrowserWindow oluştururken yanlış

js max/dak/kapama fonksiyonları

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

Cilt:

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

})(); 

Pencereyi şekillendirmek zor olabilir, ancak webkit'ten özel özellikler kullanmak için anahtar kullanım.

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

-webkit-uygulama-bölge: Eğer sürükleyebilir etmesi için, 'başlık çubuğu' bölgeye sürükleme yapacaktır bu önemli olduğunu

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

Not: Aşağıda bazı asgari CSS Pencerelerde olduğu gibi etrafında. Sürükle-bırak, düğmelere sürüklenmeyecek şekilde uygulanır.