Package Exports

rc-tabs
rc-tabs/assets/index.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-tabs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';

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

name	type	default	description
activeKey	string	-	current active tabPanel's key
animated	boolean \| { inkBar: boolean, tabPane: boolean }	true	config animation
defaultActiveKey	string	-	initial active tabPanel's key if activeKey is absent
destroyInactiveTabPane	`'ltr'	'rlt'`	`'ltr'`
direction	boolean	false	whether destroy inactive TabPane when change tab
editable	{ onEdit(type: 'add'	'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode }	-
locale	{ dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string }	-	Accessibility locale help text
moreIcon	ReactNode	-	collapse icon
tabBarGutter	number	0	config tab bar gutter
tabBarPosition	`'left'	'right'	'top'
tabBarStyle	style	-	tab nav style
tabBarExtraContent	ReactNode	-	config extra content
renderTabBar	(props, TabBarComponent) => ReactElement	-	How to render tab bar
prefixCls	string	`'rc-tabs'`	prefix class name, use to custom style
onChange	(key) => void	-	called when tabPanel is changed
onTabClick	(key) => void	-	called when tab click
onTabScroll	({ direction }) => void	-	called when tab scroll

TabPane

name	type	default	description
key	string	-	corresponding to activeKey, should be unique
forceRender	boolean	false	forced render of content in tabs, not lazy render after clicking on tabs
tab	ReactNode	-	current tab's title corresponding to current tabPane

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.