rc-tabs

What is rc-tabs?

The rc-tabs package is a React component for creating and managing tabs in a web application. It provides a set of features that allow developers to create customizable and accessible tab interfaces with ease.

What are rc-tabs's main functionalities?

Basic Tabs

This feature allows you to create basic tabbed interfaces. Each TabPane component represents a tab panel with its own content.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';

const Demo = () => (
  <Tabs defaultActiveKey="1">
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Animated Tabs

This feature adds animations to the tab transitions, providing a more dynamic user experience.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const Demo = () => (
  <Tabs defaultActiveKey="1" animated={{ inkBar: true, tabPane: true }}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Vertical Tabs

This feature allows you to create vertical tabs, with the tab list displayed on the side rather than the top.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const Demo = () => (
  <Tabs defaultActiveKey="1" tabPosition="left">
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Customizable Tabs

This feature allows for customization of the tab bar, enabling the use of custom classes and styles.

import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';

const renderTabBar = (props, DefaultTabBar) => (
  <DefaultTabBar {...props} className="my-custom-class" />
);

const Demo = () => (
  <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>
);

export default Demo;

Other packages similar to rc-tabs

react-tabs

react-tabs is a package that provides components for managing tabs in React. It is similar to rc-tabs but focuses on simplicity and accessibility, offering a more straightforward API with less customization options.

react-bootstrap-tabs

react-bootstrap-tabs is a component that integrates with the React-Bootstrap framework, providing tabs that are styled according to Bootstrap's design. It is suitable for those who are using Bootstrap for styling and want to maintain design consistency.

README

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

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.