Skip to content
This repository has been archived by the owner on Apr 2, 2023. It is now read-only.

reeseovine/windowbar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

windowbar

Emulate window title bar in three different styles. See the demo.

npm install windowbar

example screenshot

Usage

For use in browserify, electron, or a similar environment. Plain javascript:

var windowbar = require('windowbar');

var wb = new windowbar({'style':'mac', 'dblClickable':false})
	.on('close', console.log('close'))
	.on('minimize', console.log('minimize'))
	.on('fullscreen', console.log('fullscreen'))
	.on('maximize', console.log('maximize'))
	.appendTo(document.body);

The returned instance emits four events: close, minimize, maximize, and fullscreen. Note: maximize can also be triggered in the Mac style by alt-clicking fullscreen.

The constructor accepts an options object with these properties:

  • dark (default false): Dark theme.

  • draggable (default true): Enables/disables the -webkit-app-region CSS property on the root element. Allows frameless windows to be dragged in an electron application.

  • fixed (default false): Affixes to the top and floats above the rest of the content so only the buttons and title are visible. Ignores transparent rule.

  • style (defaults to current OS, or default if unrecognized): Possible values are mac, win, or default.

  • tall: (default false, mac only): Makes the windowbar taller than usual, with the controls slightly inset.

  • title: (string) Sets the title. Can be changed later with updateTitle(t).

  • transparent (default false): Transparent background for an overlayed effect.

  • dblClickable: Deprecated - Just don't provide a dblclick handler.

To do

  • Update react component

About

Emulate macOS and Windows 10 window title bar

Resources

Stars

Watchers

Forks

Languages

  • CSS 42.6%
  • JavaScript 36.0%
  • HTML 21.4%