Rahmenloses Fenster mit Steuerelementen in Elektron (Windows)

Question

Ich möchte, dass meine App keine Titelleiste hat, aber dennoch verschließbar, ziehbar, minimalisierbar, maximierbar und in der Größe veränderbar ist wie ein normales Fenster. Ich kann dies in OS X tun, da es eine titleBarStyle Option namens hidden-inset gibt, die ich verwenden kann, aber leider ist es nicht für Windows verfügbar, das ist die Plattform, für die ich entwickle. Wie würde ich in Windows so etwas machen?

Here's an example von dem ich rede.

Answer 1

Angenommen, Sie möchten kein Fenster-Chrom, können Sie dies erreichen, indem Sie den Rahmen um Electron entfernen und den Rest mit html/css/js füllen. Ich habe einen Artikel geschrieben, der das erreicht, wonach du in meinem Blog suchst: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Code Ihnen wird auch hier loszulegen gehostet: https://github.com/srakowski/ElectronLikeVS

Um es zusammenzufassen, die Sie benötigen Rahmen weitergeben müssen:

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

Dann erstellen und Steuertasten für die Titelleiste hinzufügen:: false, wenn Sie den Browser neu erstellen

<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 der max/min/close Funktionen 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(); 
      } 
    }; 

})(); 

Das Formatieren des Fensters kann schwierig sein, aber der Schlüssel verwendet spezielle Eigenschaften von Webkit. Hier einige 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; 
} 

Beachten Sie, dass diese sind wichtig:

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

-webkit-app-Region: drag auf Ihrer Titelleiste "Region wird es machen, so dass Sie es ziehen herum, wie es bei Fenstern üblich ist. Das Nicht-Ziehen wird auf die Schaltflächen angewendet, sodass sie nicht gezogen werden.