web-dev-qa-db-ja.com

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

Electron を使用してデスクトップアプリを作成し始めています。ウィンドウのタイトルバー(閉じる、最小化、全画面ボタンを含む)をカスタマイズしてカスタムビューを追加するにはどうすればよいですか?サファリは私が考えている例です:

safar title bar

15
Andrew

Electronでの唯一のオプションは frameless (別名borderless)ウィンドウを作成し、必要なUI要素を含め、CSSで「偽の」タイトルバーを作成することです。

Electron/webkitには、タイトルバーなどの要素をドラッグ可能にするCSSプロパティが用意されています。

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

最初の、そしてクロスプラットフォームのオプションは 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ドラッグゾーンを指定します。

16
16patsle