Electronアプリのウィンドウタイトルバーをカスタマイズする方法は？

Question

Electronと協力して、デスクトップアプリを構築し始めました。カスタムビューを追加するには、ウィンドウのタイトルバー（閉じる、最小化、全画面のボタンを含む）をカスタマイズするにはどうすればよいですか？

が

Answer 1

電子であなたの唯一のオプションは、ボーダレスなウィンドウを作成し、あなたが必要とするすべてのUI要素を含め、CSSと「偽」のタイトルバーを作成することです：Safariは私が考えている例であります。

電子/ WebKitがタイトルバーのように、あなたは任意の要素をドラッグ可能にすることを可能にするCSSのプロパティが用意されています

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

Answer 2

まず、クロスプラットフォームのオプションがframeless windowを作成することです。 2番目はmacOSのみで、タイトルバーを隠すことができますが、ウィンドウコントロールを保持してカスタムボタンを追加することができます。 例：

const { BrowserWindow } = require('electron') 

// This will create a window without titlebar, allowing for customization 
let win = new BrowserWindow({ titleBarStyle: 'hidden' }) 
win.show() 

その後、ドラッグゾーンを指定するCSSプロパティ-webkit-user-selectと-webkit-app-regionを使用することができます。