@lidakai/rc-tabs

rc-tabs

---

React Tabs component.

Screenshot

Example

http://localhost:8000/examples

online example: https://tabs.react-component.now.sh/

install

Feature

Keyboard

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

Usage

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

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 }	{ inkBar: true, tabPane: false }	config animation
defaultActiveKey	string	-	initial active tabPanel's key if activeKey is absent
destroyInactiveTabPane	boolean	false	whether destroy inactive TabPane when change tab
direction	`'ltr'	'rlt'`	'ltr'
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 | { left: ReactNode, right: 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.

FAQ

Resposive Tabs

There are 3 cases when handling resposive tabs:

We get hidden tabs through useVisibleRange.ts. If enconter the third case, in order to make tabs responsive, some tabs should be hidden. So we minus addSize when calculating basicSize manully, even though there's no addNode in container. In this way, case 3 turns to case 2, tabs become stable again.