JSPM

electron-custom-titlebar

4.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q33474F
  • License MIT

Adds CSS-based UI title bars to any Electron-based desktop app

Package Exports

  • electron-custom-titlebar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (electron-custom-titlebar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Electron Custom Titlebar NPM versionIssuesLicense

Adds CSS-based UI title bars to any Electron-based desktop app. Fully customizable with menu implementation. Menu can be use as remote contextMenu from electron or stylized with CSS.

Initial fork from electron-titlebar-windows, now as independent version.

Electron version supported : ^1.8.8 || ^4.2.11 || >=5.0.0.

yarn add electron-custom-titlebar

npm install electron-custom-titlebar --save

screen screen2

Table of Content

  1. Usage
  2. API
  3. Contributing
  4. License

Installation

Usage

The module takes a single optional argument options and exports the TitleBar class:

import ElectronTitlebar from 'electron-custom-titlebar';

const titlebar = new ElectronTitlebar({ ...options });

Properties of options:

  • (optional) darkMode - String - Light titlebar buttons (for dark backgrounds)
  • (optional) color - String - Icon color (Hex)
  • (optional) backgroundColor - String - Bar color (Hex)
  • (optional) draggable - Boolean - Titlebar enables dragging of contained window
  • (optional) fullscreen - Boolean - Resize button initializes in fullscreen mode
  • (optional) title - String - The app name shown to the left of the menu items
  • (optional) icon - String - The app icon shown on the top left
  • (optional) menu - Object - The array of menu items following the Electron Menu Object Documentation/Template
  • (optional) onDoubleClick - Boolean - Double clicking on titlebar enable to resize window in fullscreen mode. Default to false
  • (optional) contextMenu - Boolean - Use internal contextMenu of Electron. Useful if using browserView. Default to false

API

#appendTo

Add titlebar to your HTML app page. If you use several webviews, you should add it to a persistent app page.

titlebar.appendTo(contextElement);
  • (optional) contextElement - HTMLElement - Default: document.body - Element to which to add the titlebar
  • Returns - Titlebar

#update

Update the Title Bar. Useful to handle Electron Menu.on('update', () => titlebar.update(menu)).

titlebar.update(options);
  • options - Object - default to previous configuration - Titlebar Configuration
  • Returns - Titlebar

#destroy

Removes the Title Bar.

titlebar.destroy();

Events

TitleBar emits the following events:

  • minimize
  • maximize
  • fullscreen
  • close
titlebar.on('close', function(e) {
    console.log('close');
});

Contributing

Fork this project and make a new PR to start contributing to this project. Here are some example how to contribute.

TODO

  • Complete example project
  • Include multi BrowserView support for better menu interaction (electron@^5)
  • Better drag support with electron-drag

License

MIT © popzelife

Based on sidneys