Безрамное окно с элементами управления в электронном (Windows)

Я хочу, чтобы в моем приложении не было панели заголовка, но все же можно было закрыть, перетащить, минимизировать, максимизировать и изменять размер, как обычное окно. Я могу сделать это в OS X, поскольку есть опция titleBarStyle под названием hidden-inset, которую я могу использовать, но, к сожалению, она недоступна для Windows, которая является платформой, для которой я развиваюсь. Как я могу сделать что-то подобное в Windows?

Вот пример того, о чем я говорю.

ОТВЕТЫ

Ответ 1

Предполагая, что вам не нужен хром, вы можете сделать это, удалив фрейм вокруг Electron и заполнив остальное с помощью html/css/js. Я написал статью, которая обеспечивает то, что вы ищете в моем блоге: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Код, который вы можете запустить, также размещен здесь: https://github.com/srakowski/ElectronLikeVS

Подводя итог, вам необходимо передать фрейм: false при создании BrowserWindow:

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>

Привяжите функции max/min/close в 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(); 
          }
     };

})();

Стилизация окна может быть сложной задачей, но ключ используется для использования специальных свойств 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: перетащите область вашего заголовка, сделайте так, чтобы ее можно было перетащить, как это обычно бывает в Windows. Не-перетаскивание применяется к кнопкам так, чтобы они не вызывали перетаскивание.

Ответ 2

Я был вдохновлен статьей шона и такими приложениями, как Hyper Terminal, чтобы выяснить, как точно воспроизвести стиль Windows 10 в виде бесшовной строки заголовка, и написал это руководство.

Он включает в себя исправление проблемы изменения размера, о которой говорил Шон, а также переключение между кнопками увеличения и восстановления, даже когда, например, окно развернуто, перетаскивая его в верхнюю часть экрана.

Краткий справочник

  • Высота строки заголовка: 32px
  • Размер шрифта заголовка строки заголовка: 12px
  • Кнопки управления окном: широкая 46px, высокая 32px
  • Окно управления активами кнопки из шрифта Segoe MDL2 Assets, размер: 10px
    • Свернуть: &#xE921;
    • Развернуть: &#xE922;
    • Восстановление: &#xE923;
    • Закрыть: &#xE8BB;
  • Цвет фона кнопки "Закрыть"
    • Нормальный: #E81123
    • Нажата (:active): #F1707A

Ответ 3

я использую это в своих приложениях:

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>