windows - 편집 - 최소 프레임




전자 제어 장치가있는 프레임리스 창(Windows) (2)

나는 Shawn의 기사와 하이퍼 터미널과 같은 응용 프로그램에서 영감을 받아 Windows 10 스타일의 모양을 완벽한 제목 표시 줄로 정확히 복제하는 방법을 알아 냈습니다. 이 자습서를 작성 했습니다 .

Shawn이 언급 한 크기 조정 문제에 대한 수정 사항이 포함되어 있으며 최대화 및 복원 버튼 간의 전환도 포함됩니다. 예를 들어 창을 화면 상단으로 드래그하여 창을 최대화 한 경우에도 마찬가지입니다.

빠른 참조

  • 제목 표시 줄 높이 : 32px
  • 제목 표시 줄 제목 글꼴 크기 : 12px
  • 창 제어 버튼 : 폭 46px , 높이 32px
  • Segoe MDL2 Assets 글꼴의 창 제어 버튼 에셋 Segoe MDL2 Assets , 크기 : 10px
    • 최소화 : 
    • 최대화 : 
    • 복원 : 
    • 닫기 : 
  • 버튼 배경색 닫기
    • 보통 : #E81123
    • 누름 ( :active ) : #F1707A

내 앱에 제목 표시 줄이 없어도 일반 창처럼 닫기 가능, 드래그 가능, 최소화 가능, 최대화 및 크기 조정 가능하도록하고 싶습니다. 내가 OS X에서 사용할 수있는 hidden-inset 이라는 titleBarStyle 옵션이 있기 때문에이 작업을 수행 할 수 있습니다. 그러나 불행히도 Windows 용으로는 개발할 플랫폼이 없습니다. Windows에서 이와 같은 작업을 수행하려면 어떻게해야합니까?

다음은 내가 말하는 것에 대한 입니다.


창 크롬을 원하지 않는다고 가정하면 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를 만들 때 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의 최대 / 최소 / 닫기 함수에 바인딩 :

(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 : '제목 표시 줄'영역의 드래그를 사용하면 창과 같이 일반적으로 드래그 할 수 있습니다. 끌기가 발생하지 않도록 단추에 끌기가 적용되지 않습니다.







titlebar