Electron アプリのウィンドウタイトルバーをカスタマイズするにはどうすればいいですか? 質問する

Electron アプリのウィンドウタイトルバーをカスタマイズするにはどうすればいいですか? 質問する

私は仕事を始めています電子デスクトップ アプリを構築します。ウィンドウのタイトル バー (閉じる、最小化、全画面表示ボタンを含む) をカスタマイズしてカスタム ビューを追加するにはどうすればよいでしょうか。Safari は私が考えている例です。

safar タイトルバー

ベストアンサー1

Electronで唯一の選択肢は、フレームレス(別名、ボーダーレス) ウィンドウを作成し、必要な UI 要素を含む CSS を使用して「偽の」タイトル バーを作成します。

Electron/webkit は、タイトルバーのような任意の要素をドラッグ可能にする CSS プロパティを提供します。

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

おすすめ記事