Phosphor-float-area NPM

phosphor-float-area

Draggable, dockable, resizable, floating, tabbed Dialog and FloatArea widgets:

Screen recording

100% Virtual DOM, TypeScript, PhosphorJS based modern JavaScript goodness :cake:

Live demo

Alternatively, run the following commands and then open localhost:8080 to see it in action:

git clone https://github.com/charto/phosphor-float-area.git
cd phosphor-float-area
npm install
npm run prepublish
npm start

The demo uses SystemJS. Works directly from the public directory of any HTTP server. With compileOnSave (eg. atom-typescript or TypeScript for VS Code) the demo page always stays up to date while editing TypeScript source code.

Usage

Install:

npm install --save phosphor-float-area

Use:

import '@phosphor/dragdrop/style/index.css!';
import '@phosphor/widgets/style/index.css!';
import 'phosphor-float-area/style/index.css!';

import { Widget, DockPanel } from '@phosphor/widgets';
import { FloatArea } from 'phosphor-float-area';

const area = new FloatArea();
const dock = new DockPanel();

dock.addWidget(area);
dock.addWidget(new Widget(), { mode: 'split-left', ref: area });
dock.addWidget(new Widget(), { mode: 'split-right', ref: area });

area.addWidget(new Widget(), { placement: 'backdrop' });

Widget.attach(dock, document.body);

The addWidget method of FloatArea accepts an options object as the second argument, with the following optional members:

placement: string, float by default. Passing backdrop adds the widget as a non-floating backdrop, behind any floating dialogs.
left, top, width, height: number. Initial pixel size and placement of the floating dialog to add.