react-panels

Demo/examples Features Playground Install Usage

A multipurpose tabbed panel component with many features. Using React v0.13.1 with addons.

Features

No dependencies, single JS file with React inline styles.
- Written to be browser first from the start so our browser build is a simple javascript file instead of a webpack/browserify bundle like in other react components. Nevertheless, this doesn't mean that react-panels is not suited for other kind of projects since a CommonJS build is also provided.
Support for themes and skins.
- Available themes: chemical ^demo, flexbox ^demo, flexbox2 ^{No demo yet}.
- Wanna share one of your own? Open an issue or make a pull request.
Fixed or as a draggable floating panel.
Multi-content components and toggleable footer and toolbars in tabs.
Auto-collapsible tab header buttons when don't fit in a single row.
Custom panel buttons.
Easily extensible by mixins. ^{Not documented yet}
Animations ^demo
Drag&drop tabs ^demo Warning: In development, subject to change.

Roadmap

Optional className in props to allow CSS styling.
Restore collapsed tab headers when there's available space. ^{(not needed in flex based themes)}
Allow prebuilt styles to increase performance.
More...

Install

Using bower

bower install react-panels

Include bower_components/react-panels/dist/react-panels[.min].js after react-with-addons[.min].js

Using npm

npm install react-panels

var ReactPanels = require('react-panels')
// or
var ReactPanels = require('react-panels/addons')

Usage

Example usage:

var Panel = ReactPanels.Panel;
var Tab = ReactPanels.Tab;
var Toolbar = ReactPanels.Toolbar;
var Content = ReactPanels.Content;
var Footer = ReactPanels.Footer;

var MyPanel = React.createClass({
  render: function () {
    return (
      <Panel theme="chemical">
        <Tab title="One" icon="fa fa-plane">
          <Toolbar>Toolbar content of One</Toolbar>
          <Content>Content of One</Content>
          <Footer>Footer content of One</Footer>
        </Tab>
        <Tab title="Two" icon="fa fa-fire">
          <Content>Content of Two</Content>
        </Tab>
      </Panel>
    );
  }
});

Documentation for react-panels v2 is not available yet but you can take a look at the working examples for easy usages of almost all its features.

Contributing

Feel free to fork this repo and make a PR. Any help is welcome, even fixing typos. I created react-panels to use it myself and I'm mostly adding new features or bug fixes on a need basis. So, if you need something specific, you can add/fix it yourself or open a new issue and I'll provide feedback as soon as possible.

Thanks to

yap cheah shen for his contributions.

Compatibility

Compatible with MoreartyJS. ^{Slightly tweaked}
Tested in Google Chrome, Mozilla Firefox, Opera and Internet Explorer 10 & 11.

License

The MIT License (MIT)

Theadd / react-panels