rc-tabs

---

react tabs component

Screenshot

install

Feature

Keyboard

• left and up: switch to previous tab
• right and down: switch to next tab

Usage

var Tabs = require('rc-tabs');
var TabPane = Tabs.TabPane;

var callback = function(key){

}

React.render(
  (
    <Tabs defaultActiveKey="2" onChange={callback}>
      <TabPane tab='tab 1' key="1">first</TabPane>
      <TabPane tab='tab 2' key="2">second</TabPane>
      <TabPane tab='tab 3' key="3">third</TabPane>
    </Tabs>
  ),
  document.getElementById('t2'));

API

Tabs

props:

name	type	default	description
activeKey	String		current active tabPanel's key
tabPosition	String		tab nav 's position. one of ['left','right','top','bottom']
animation	String		tabPane's animation. current only support slide-horizontal in assets/index.css
transitionName	Object		specify backward and forward transitionName. such as ```js { backward:'rc-tabs-slide-horizontal-backward', forward:'rc-tabs-slide-horizontal-forward' } ```
defaultActiveKey	String	first active tabPanel's key	initial active tabPanel's key if activeKey is absent
onChange	Function(key)		called when tabPanel is changed
onTabClick	Function(key)		called when tab is clicked
tabBarExtraContent	React Node		extra content placed one the right of tab bar
destroyInactiveTabPane	Boolean	false	whether destroy inactive tabpane when change tab

TabPane

props:

name	type	default	description
key	Object		corresponding to activeKey
tab	String		current tab's title corresponding to current tabPane

Development

npm install
npm start

Example

http://localhost:8000/examples

online example: http://react-component.github.io/tabs/examples/

Test Case

http://localhost:8000/tests/runner.html?coverage

Coverage

http://localhost:8000/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

License

rc-tabs is released under the MIT license.