web-dev-qa-db-fra.com

Fenêtre sans cadre avec commandes en électron (Windows)

Je veux que mon application n'ait pas de barre de titre mais soit toujours fermable, déplaçable, minimisable, maximisable et redimensionnable comme une fenêtre normale. Je peux le faire sous OS X car il existe une option titleBarStyle appelée hidden-inset que je peux utiliser mais malheureusement il n'est pas disponible pour Windows, qui est la plate-forme pour laquelle je développe. Comment pourrais-je faire quelque chose comme ça dans Windows?

Voici un exemple de ce dont je parle.

windowselectrontitlebar
24
nakamin

En supposant que vous ne voulez pas de chrome de fenêtre, vous pouvez accomplir cela en supprimant le cadre autour d'Electron et en remplissant le reste avec html/css/js. J'ai écrit un article qui réalise ce que vous recherchez sur mon blog ici: http://www.mylifeforthecode.com/making-the-electron-Shell-as-pretty-as-the-visual-studio- Shell / . Le code pour vous aider à démarrer est également hébergé ici: https://github.com/srakowski/ElectronLikeVS

Pour résumer, vous devez passer frame: false lorsque vous créez le BrowserWindow:

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

Ensuite, créez et ajoutez des boutons de contrôle pour votre barre de titre:

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

Lier les fonctions max/min/close dans 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(); 
          }
     };

})();

Le style de la fenêtre peut être délicat, mais l'utilisation de la clé pour utiliser les propriétés spéciales du webkit. Voici quelques CSS minimales:

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

Notez que ceux-ci sont importants:

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

-webkit-app-region: faire glisser sur la région de la "barre de titre" vous permettra de la faire glisser comme cela est courant avec les fenêtres. Le no-drag est appliqué aux boutons afin qu'ils ne provoquent pas de glissement.

66
Shawn Rakowski

J'ai été inspiré par l'article et les applications de Shawn comme Hyper Terminal pour comprendre comment reproduire exactement le style Windows 10 sous forme de barre de titre transparente, et j'ai écrit ce tutoriel .

Il comprend un correctif pour le problème de redimensionnement mentionné par Shawn, et bascule également entre les boutons d'agrandissement et de restauration, même lorsque, par exemple. la fenêtre est agrandie en la faisant glisser vers le haut de l'écran.

Référence rapide

  • Hauteur de la barre de titre: 32px
  • Taille de la police du titre de la barre de titre: 12px
  • Boutons de commande de fenêtre: 46px large, 32px haute
  • Actifs du bouton de contrôle de la fenêtre de la police Segoe MDL2 Assets, Taille: 10px
    • Minimiser: &#xE921;
    • Agrandir: &#xE922;
    • Restaurer: &#xE923;
    • Proche: &#xE8BB;
  • Couleurs d'arrière-plan du bouton Fermer
    • Ordinaire: #E81123
    • Appuyez sur (:active): #F1707A
19
binaryfunt

j'utilise ceci dans mes applications:

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