Skip to content

Latest commit

 

History

History
79 lines (61 loc) · 3.34 KB

README.md

File metadata and controls

79 lines (61 loc) · 3.34 KB
Raw

Golden Layout

NPM version License

Golden Layout is a Javascript layout manager which enables you to layout components in a web page and re-arrange them with drag and drop. Its features include:

  • Native popup windows
  • Touch support
  • Support for application frameworks such as Angular and Vue
  • Virtual components
  • Comprehensive API
  • Load and save layouts
  • Focus components
  • Completely themeable
  • Works in modern browsers (Firefox, Chrome)
  • Responsive design

This fork has a number of advances over the semi-unmaintained upstream. The main feature is optional use of the HTML Drag and Drop API. This enables:

  • Drag from one window and drop to another.
  • Drag from one window and drop to desktop as new window (popout).
  • Cancel a drag (usually by typing Escape before releasing mouse).
  • Optionally drag-image (proxy) is snapstop of dragged component.

Other features include:

  • Customizable tab-bar header.
  • Smart display of tabs when space gets tight.
  • If there is a single stack (one row and columne but posssible multiple tabs) the tab-bar header can be embedded inside a custom (html) titlebar.
  • Component elements are not re-parented when moved within a window. This avoide breaking iframes, sockets, etc.
  • If running under Qt or Electron (experimental) it is possible to use virtual binding with each compoent in the separate browsercontext. Then you can move components between top-level windows by without serializing the contents.

This is used in DomTerm.

The API is not stable or well documented nor compatible with upstream. Most specifically, I feel no need to be compatible with the old mechanisms for Binding Components as they are overly complicated and redundant. The default binding method will not move a component's element in the DOM tree when you moving within the original window. Thus iframes and sockets will remain valid.

Since upstream is inactive, I see no point in creating clean pull requests. Likewise, documenting my changes or cleaning up the APIs is not a priority unless I see signs of actual users. If you do want to use my fork, feel free to create an Issue or email me if you need help - that may spur me to clean things up a bit.

Installation

From a git clone

npm install
npm run build:bundles

Copy the file dist/bundle/esm/golden-layout.min.js (if using EcmaScript modules, as recommended) or dist/bundle/umd/golden-layout.min.js (if using UMD modules) to a folder (for example lib) inside your application. Import it from there, for example with:

import { GoldenLayout } from '../lib/golden-layout/golden-layout.min.js'

Also recursively copy the contents of dist/css to where you application can read them,

Using npm

The library can be installed into an application package with the npm command:
npm i golden-layout However, this may get you a very old version.

More information

For more information, please refer to the Golden Layout website