wake-up-neo.com

Rahmenloses Fenster mit elektronischer Steuerung (Windows)

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

Hier ist ein Beispiel wovon ich rede.

24
nakamin

Vorausgesetzt, Sie möchten kein Fensterchrom, können Sie dies erreichen, indem Sie den Rahmen um Electron entfernen und den Rest mit html/css/js ausfüllen. Ich habe hier in meinem Blog einen Artikel geschrieben, der das erreicht, wonach Sie suchen: http://www.mylifeforthecode.com/making-the-electron-Shell-as-pretty-as-the -visual-studio-Shell/ . Der Code für den Einstieg wird auch hier gehostet: https://github.com/srakowski/ElectronLikeVS

Zusammenfassend müssen Sie frame: false übergeben, wenn Sie das BrowserWindow erstellen:

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

Erstellen und fügen Sie dann Steuerungsschaltflächen für Ihre Titelleiste hinzu:

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

Binden Sie die Funktionen max/min/close in js ein:

(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 Stylen des Fensters kann schwierig sein, aber der Schlüssel zur Verwendung spezieller Eigenschaften aus dem Webkit. Hier ist einige minimale 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 dies wichtig ist:

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

-webkit-app-region: Ziehen Sie an Ihrer Titelleiste, damit Sie sie verschieben können, wie es bei Windows üblich ist. Das Nichtziehen wird auf die Schaltflächen angewendet, damit sie kein Ziehen verursachen.

66
Shawn Rakowski

Ich wurde von Shawns Artikel und Apps wie Hyper Terminal inspiriert, um herauszufinden, wie man das Aussehen von Windows 10 als nahtlose Titelleiste exakt reproduziert, und schrieb dieses Tutorial .

Es enthält eine Korrektur für das erwähnte Größenänderungsproblem Shawn und wechselt auch zwischen den Schaltflächen zum Maximieren und Wiederherstellen, selbst wenn z. Das Fenster wird maximiert, indem Sie es an den oberen Bildschirmrand ziehen.

Kurzübersicht

  • Höhe der Titelleiste: 32px
  • Schriftgröße des Titels in der Titelleiste: 12px
  • Fenstersteuerungstasten: 46px breit, 32px hoch
  • Elemente der Fenstersteuerungsschaltfläche aus Schriftart Segoe MDL2 Assets, Größe: 10px
    • Minimieren: &#xE921;
    • Maximieren: &#xE922;
    • Wiederherstellen: &#xE923;
    • Schließen: &#xE8BB;
  • Close Button Hintergrundfarben
    • Normal: #E81123
    • Gedrückt (:active): #F1707A
19
binaryfunt

ich benutze dies in meinen Apps:

const { remote } = require("electron");
var win = remote.BrowserWindow.getFocusedWindow();

var title = document.querySelector("title").innerHTML;
document.querySelector("#titleshown").innerHTML = title;

var minimize = document.querySelector("#minimize");
var maximize = document.querySelector("#maximize");
var quit = document.querySelector("#quit");

minimize.addEventListener("click", () => {
  win.minimize();
});

maximize.addEventListener("click", () => {
  win.setFullScreen(!win.isFullScreen());
});

quit.addEventListener("click", () => {
  win.close();
});
nav {
  display: block;
  width: 100%;
  height: 30px;
  background-color: #333333;
  -webkit-app-region: drag;
  -webkit-user-select: none;
  position: fixed;
  z-index: 1;
}

nav #titleshown {
  width: 30%;
  height: 100%;
  line-height: 30px;
  color: #f7f7f7;
  float: left;
  padding: 0 0 0 1em;
}

nav #buttons {
  float: right;
  width: 150px;
  height: 100%;
  line-height: 30px;
  background-color: #222222;
  -webkit-app-region: no-drag;
}

nav #buttons #minimize,
nav #buttons #maximize,
nav #buttons #quit {
  float: left;
  height: 100%;
  width: 33%;
  text-align: center;
  color: #f7f7f7;
  cursor: default;
}

nav #buttons #minimize:hover {
  background-color: #333333aa;
}
nav #buttons #maximize:hover {
  background-color: #333333aa;
}
nav #buttons #quit:hover {
  background-color: #ff0000dd;
}

main {
  padding-top: 30px;
  overflow: auto;
  height: calc(100vh - 30px);
  position: absolute;
  top: 30px;
  left: 0;
  padding: 0;
  width: 100%;
}
<html>
  <head>
      <meta charset="UTF-8">
      <title>Hello World!</title>
  </head>
  <body>
    <nav>
      <div id="titleshown"></div>
      <div id="buttons">
          <div id="minimize"><span>&dash;</span></div>
          <div id="maximize"><span>&square;</span></div>
          <div id="quit"><span>&times;</span></div>
      </div>
    </nav>
    <main>
      <div class="container">
          <h1>Hello World!</h1>
      </div>
    </main>
  </body>
</html>
0
Amine Beihaqi