rc-tabs

React Tabs

Screenshot

Example

http://localhost:8000/examples

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

install

Feature

Keyboard

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

Usage

import Tabs, { TabPane } from "@gem-mine/rc-tabs";
import TabContent from "@gem-mine/rc-tabs/lib/TabContent";
import ScrollableInkTabBar from "@gem-mine/rc-tabs/lib/ScrollableInkTabBar";

var callback = function(key) {};

React.render(
  <Tabs defaultActiveKey="2" onChange={callback} renderTabBar={() => <ScrollableInkTabBar />} renderTabContent={() => <TabContent />}>
    <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")
);

Usage of navWrapper() function

navWrapper() prop allows to wrap tabs bar in a component to provide additional features.
Eg with react-sortablejs to make tabs sortable by DnD :

import Sortable from 'react-sortablejs';

navWrapper={(content) => <Sortable>{content}</Sortable>}

API

Tabs

props:

TabPane

props:

lib/TabBar

lib/InkTabBar

tab bar with ink indicator, in addition to tab bar props, extra props:

lib/ScrollableTabBar

scrollable tab bar, in addition to tab bar props, extra props:

lib/ScrollableInkTabBar

scrollable tab bar with ink indicator, same with tab bar and ink bar and scrollable bar props.

| name | type | default | description | | -------- | -------------- | ------- | ---------------------- | | children | (node) => node | - | Customize tab bar node |

lib/SwipeableInkTabBar (Use for Mobile)

swipeable tab bar with ink indicator, same with tab bar/ink bar props, and below is the additional props.

lib/TabContent

lib/SwipeableTabContent

swipeable tab panes, in addition to lib/TabContent props, extra props:

Note

If you want to support old browsers(which does not support flex/css-transition), please load the following script inside head to add no-flexbox/no-csstransition css classes

https://as.alipayobjects.com/g/component/modernizr/2.8.3/modernizr.min.js

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-tabs is released under the MIT license.