phosphor-gridpanel
A Phosphor layout panel which arranges its children into a 2D grid.
Package Install
Prerequisites
npm install --save phosphor-gridpanel
Source Build
Prerequisites
git clone https://github.com/phosphorjs/phosphor-gridpanel.gitcd phosphor-gridpanelnpm install
Rebuild
npm run cleannpm run build
Run Tests
Follow the source build instructions first.
# run tests in Firefox npm test # run tests in Chrome npm run test:chrome # run tests in IE npm run test:ie
Build Docs
Follow the source build instructions first.
npm run docs
Navigate to docs/index.html
.
Build Example
Follow the source build instructions first.
npm run build:example
Navigate to example/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 browserify browserify-cssbrowserify 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.
; ; // Create some content for the panel.;;; // Create the row and column specs for panel.; ; // Set the content cell indices and spans.GridPanel.setRoww1, 0;GridPanel.setColumnw1, 0;GridPanel.setRowSpanw1, 1;GridPanel.setColumnSpanw1, 1; GridPanel.setRoww2, 1;GridPanel.setColumnw2, 0;GridPanel.setRowSpanw2, 1;GridPanel.setColumnSpanw2, 1; GridPanel.setRoww3, 0;GridPanel.setColumnw3, 1;GridPanel.setRowSpanw3, 2;GridPanel.setColumnSpanw3, 1; // Setup the grid panel.;panel.rowSpacing = 3;panel.columnSpacing = 3;panel.rowSpecs = rowSpecs;panel.columnSpecs = colSpecs;panel.addChildw1;panel.addChildw2;panel.addChildw3;