phosphor-tabs

Phosphor widgets for creating tab bars and tab panels.

API Docs

Package Install

Prerequisites

• node

npm install --save phosphor-tabs

Source Build

Prerequisites

• git
• node

git clone https://github.com/phosphorjs/phosphor-tabs.git
cd phosphor-tabs
npm install

Rebuild

npm run clean
npm 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-css
browserify 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.

import {
  TabPanel
} from 'phosphor-tabs';

import {
  Widget
} from 'phosphor-widget';


function main(): void {
  let one = new Widget();
  one.title.text = 'One';

  let two = new Widget();
  two.title.text = 'Two';

  let three = new Widget();
  three.title.text = 'Three';

  // Note: A `TabBar` can also be used independently of a `TabPanel`.
  let panel = new TabPanel();
  panel.tabsMovable = true;
  panel.addChild(one);
  panel.addChild(two);
  panel.addChild(three);

  panel.attach(document.body);

  window.onresize = () => { panel.update(); };
}