web-dev-qa-db-ja.com

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

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

safar title bar

macoselectron
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