custom electron titlebar

カスタム電子タイトルバー

このプロジェクトは、完全にカスタマイズ可能なタイトルバーを構成できる電子用のタイプスクリプトライブラリです。

重要

私はそれに取り組んでいる唯一のものであり、問​​題を確認し、新機能を組み込んだり、依存関係を最新のバージョンに更新するための自由時間が残っていないため、このプロジェクトはもはや維持されません。

このライブラリのすべての貢献者と扶養家族に感謝します。

？ドキュメント

標準タイトルバー

下のメニューバー

メニュー

カスタムカラー

？インストール

このパッケージは、 npm 、 pnpm 、またはyarnでインストールできます。

npm install custom-electron-titlebar

pnpm add custom-electron-titlebar

yarn add custom-electron-titlebar

使用法

実装は次のように行われます。

メインアプリケーションファイル（main.jsまたは.ts）

 import { setupTitlebar , attachTitlebarToWindow } from "custom-electron-titlebar/main" ;

// setup the titlebar main process
setupTitlebar ( ) ;

function createWindow ( ) {
  // Create the browser window.
  const mainWindow = new BrowserWindow ( {
    width : 800 ,
    height : 600 ,
    //frame: false, // needed if process.versions.electron < 14
    titleBarStyle : 'hidden' ,
    /* You can use *titleBarOverlay: true* to use the original Windows controls */
    titleBarOverlay : true ,
    webPreferences : {
      sandbox : false ,
      preload : path . join ( __dirname , 'preload.js' )
    }
  } ) ;
  
  ...

  // attach fullScreen(f11 and not 'maximized') && focus listeners
  attachTitlebarToWindow ( mainWindow ) ;
}

Preloadファイル（Preload.jsまたは.ts）

 import { Titlebar } from "custom-electron-titlebar" ;

window . addEventListener ( 'DOMContentLoaded' , ( ) => {
  // Title bar implementation
  new Titlebar ( ) ;
} ) ;

要素の色、アイコン、メニューの位置など、使用できる方法など、タイトルバーコンストラクターに含めることができるオプションを確認するには、Wikiにアクセスしてください

？サポート

私の開発をサポートしたい場合は、寄付することでそうすることができますか？スポンサー

貢献者

このプロジェクトの開発と進歩に協力してきたすべての人々に心から感謝したいと思います。あなたの貢献に感謝します。

✅ライセンス

このプロジェクトはMITライセンスの下にあります。