phosphor-boxengine
A low-level box layout algorithm.
Package Install
Prerequisites
npm install --save phosphor-boxengine
Source Build
Prerequisites
git clone https://github.com/phosphorjs/phosphor-boxengine.gitcd phosphor-boxenginenpm 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.
- Node 0.12.7+
- 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.
; // Setup a simple 3-column arrangement. Normally done via static HTML// or some form of DOM generation library. Kept simple for this example.;;;;; host.style.position = 'relative';host.style.height = '500px'; col1.style.position = 'absolute';col1.style.top = '0';col1.style.bottom = '0'; col2.style.position = 'absolute';col2.style.top = '0';col2.style.bottom = '0'; col3.style.position = 'absolute';col3.style.top = '0';col3.style.bottom = '0'; host.appendChildcol1;host.appendChildcol2;host.appendChildcol3;document.body.appendChildhost; // Create the sizers for the columns.;;;; // Setup the constraints on the column widths.sizer1.minSize = 150;sizer2.maxSize = 250;sizer2.minSize = 100;sizer3.minSize = 150;sizer3.maxSize = 250; // Setup the desired sizes for the columns.sizer1.sizeHint = 300;sizer2.sizeHint = 600;sizer3.sizeHint = 200; // The middle column expands twice as fast as the others.sizer1.stretch = 1;sizer2.stretch = 2;sizer3.stretch = 1; // Layout the columns on each resize event. Note that `boxCalc` only// handles sizes in the direction of layout (`width` in this case).// The application decides how to handle the orthogonal dimension.window.onresize =;