2016年6月16日木曜日

Electronで、フレーム無しのウィンドウ(Frameless Window)

Electronで、フレーム無しのウィンドウ(Frameless Window)です。本当は、ウィンドウを透明にする「transparent: true」のオプションも付けたかったのですが、Linuxではうまく動作しないようです。

main.js
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})
フレーム無しのウィンドウにすると、ドラッグできなくなってしまうため、スタイル属性に「-webkit-app-region: drag」を追加する必要があります。

index.html
<body style="-webkit-app-region: drag">
</body>
さらに、このままだとボタンがクリックできなくなってしまうので、スタイル属性に「-webkit-app-region: no-drag」を追加します。

style.css
button {
  -webkit-app-region: no-drag;
}

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

参考サイト
Frameless Window(Electron)
JavaScript (Electron) を使ってアプリの見栄えを整える(Qiita)

0 件のコメント:

コメントを投稿