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'`	Layout direction of tabs component
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' \| 'bottom'`	`'top'`	tab nav 's position
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
closeIcon	ReactNode	-	Config close icon

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.

Current Tags

10.0.0-alpha.1 ... beta (6 years ago)
12.5.6 ... latest (3 years ago)

rc-tabs

Screenshot

Example

install

Feature

Keyboard

Usage

API

Tabs

TabPane

Development

Test Case

Coverage

License

Current Tags

37 Versions