react-panels

Demo/examplesFeaturesPlaygroundInstallUsage

A multipurpose tabbed panel component with many features. Using Reactv0.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 ^demoWarning: 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

varReactPanels=require('react-panels')// orvarReactPanels=require('react-panels/addons')

Usage

Example usage:

varPanel=ReactPanels.Panel;varTab=ReactPanels.Tab;varToolbar=ReactPanels.Toolbar;varContent=ReactPanels.Content;varFooter=ReactPanels.Footer;varMyPanel=React.createClass({render: function(){return(<Paneltheme="chemical"><Tabtitle="One"icon="fa fa-plane"><Toolbar>Toolbar content of One</Toolbar><Content>Content of One</Content><Footer>Footer content of One</Footer></Tab><Tabtitle="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)