phosphor-panel
A convenient Phosphor panel widget and layout.
Package Install
Prerequisites
npm install --save phosphor-panel
Source Build
Prerequisites
git clone https://github.com/phosphorjs/phosphor-panel.gitcd phosphor-panelnpm install
Rebuild
npm run cleannpm run build
Run Tests
Follow the source build instructions first.
npm test
Build Docs
Follow the source build instructions first.
npm run docs
Navigate to docs/index.html
.
Supported Runtimes
The runtime versions which are currently known to work are listed below. Earlier versions may also work, but come with no guarantees.
- IE 11+
- Firefox 32+
- Chrome 38+
Bundle for the Browser
Follow the package install instructions first.
npm install --save-dev browserifybrowserify myapp.js -o mybundle.js
Usage Examples
Note: This module is fully compatible with Node/Babel/ES6/ES5. Simply omit the type declarations when using a language other than TypeScript.
A Panel
is a convenient Widget
subclass which acts as a container for
child widgets. Adding child widgets to a panel is simple:
; ; ;;;panel.addChildchild1;panel.addChildchild2;
A more realistic scenario would involve custom widgets and CSS layout:
;logPanel.addClass'my-css-layout'; ;log.addClass'log-widget'; ;controls.addClass'controls-widget'; logPanel.addChildlog;logPanel.addChildcontrols;
The Panel
and PanelLayout
classes make it simple to create container
widgets which cover a vast swath of use cases. Simply add CSS classes to
the panel and child widgets and use regular CSS to control their layout.
Alternatively, these classes may be subclassed to create more specialized panels and layouts. The PhosphorJS project provides several useful panels and layouts out of the box. Some of the more commonly used are: