web-dev-qa-db-ja.com

電子のコントロールを備えたフレームレスウィンドウ（Windows）

アプリにタイトルバーを付けずに、通常のウィンドウのように閉じたり、ドラッグしたり、最小化したり、最大化したり、サイズ変更したりできるようにします。使用できるhidden-insetと呼ばれる titleBarStyle オプションがあるため、OS Xでこれを行うことができますが、残念ながら、Windowsでは使用できません。 m開発中。 Windowsでこのようなことを行うにはどうすればよいですか？

ここに例があります 私が話していることの。

windowselectrontitlebar
24
nakamin

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

要約すると、BrowserWindowを作成するときにframe：falseを渡す必要があります。

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

次に、タイトルバーのコントロールボタンを作成して追加します。

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

Jsのmax/min/close関数でバインドします。

(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から特別なプロパティを使用します。最小限の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;
}

これらは重要であることに注意してください。

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

-webkit-app-region：「タイトルバー」リージョンをドラッグすると、ウィンドウで一般的なようにドラッグして周りに移動できます。 no-dragはボタンに適用され、ボタンがドラッグされないようにします。

66
Shawn Rakowski

Shawnの記事とHyper Terminalなどのアプリに触発されて、Windows 10スタイルの外観をシームレスなタイトルバーとして正確に複製する方法を見つけ、 このチュートリアル と書きました。

ショーンが言及したサイズ変更の問題に対する修正が含まれており、最大化ボタンと復元ボタンを切り替えます。ウィンドウを最大化するには、ウィンドウを画面上部にドラッグします。

クイックリファレンス

  • タイトルバーの高さ：32px
  • タイトルバーのタイトルのフォントサイズ：12px
  • ウィンドウコントロールボタン：46px wide、32px high
  • フォントSegoe MDL2 Assets、サイズ：10px のウィンドウコントロールボタンアセット
    • 最小：&#xE921;
    • 最大化：&#xE922;
    • 復元：&#xE923;
    • 閉じる：&#xE8BB;
  • 閉じるボタンの背景色
    • 通常：#E81123
    • 押された（:active）：#F1707A
19
binaryfunt

私は自分のアプリでこれを使用します：

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