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' | Layout direction of tabs component | | editable | { onEdit(type: 'add' | 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } | - | config tab editable | | locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text | | moreIcon | ReactNode | - | collapse icon | | morePopupContainer | (menuDOMNode) => HTMLElement | () => document.body | DOM node container for 'more' dropdown popup | | tabBarGutter | number | 0 | config tab bar gutter | | tabBarPosition | 'left' | 'right' | 'top' | 'bottom' | 'top' | tab nav 's position | | 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.