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 from 'rc-tabs';
import ReactDom from 'react-dom';

const callback = (key) => {
  console.log(key);
};

const items = [
  {
    key: '1',
    label: 'Google',
    children: (
      <div className="text-xl">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
      </div>
    ),
  },
  {
    key: '2',
    label: <p>Amazon</p>,
    children:
      'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...',
    disabled: true,
  },
  {
    key: '3',
    label: <p>Twitter</p>,
    children: (
      <div>
        "There is no one who loves pain itself, who seeks after it and wants to have it, simply
        because it is pain..."
      </div>
    ),
  },
];

ReactDom.render(
  <Tabs
    tabPosition="bottom"
    items={items}
    defaultActiveKey="1"
    className="md:w-[70%] w-full mx-auto p-2 border-0"
    onChange={callback}
    style={{ color: 'yellow' }}
  />,
  root,
);

API

Tabs

| name | type | default | description | | --- | --- | --- | --- | | prefixCls | string | 'rc-tabs' | prefix class name, use to custom style | | className | string | - | to define a class name for an element | | style | CSS properties | - | object with css properties for styling | | items | TabItem[] | [] | configure tab content | | id | string | - | unique identifier | | defaultActiveKey | string | - | initial active tabPanel's key if activeKey is absent | | activeKey | string | - | current active tabPanel's key | | direction | 'ltr' or 'rtl' | 'ltr' | Layout direction of tabs component | | animated | boolean | { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | config animation | | renderTabBar | (props, TabBarComponent) => ReactElement | - | How to render tab bar | | tabBarExtraContent | ReactNode | { left: ReactNode, right: ReactNode } | - | config extra content | | tabBarGutter | number | 0 | config tab bar gutter | | tabBarPosition | 'left' \| 'right' \| 'top' \| 'bottom' | 'top' | tab nav 's position | | tabBarStyle | style | - | tab nav style | | tabPosition | 'left' or 'right' or 'top' or 'bottom' | 'top' | tab nav 's position | | destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab | | onChange | (key) => void | - | called when tabPanel is changed | | onTabClick | (key) => void | - | called when tab click | | onTabScroll | ({ direction }) => void | - | called when tab scroll | | 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 |

TabItem

| name | type | default | description | | --- | --- | --- | --- | | key | string | - | corresponding to activeKey, should be unique | | label | string | - | TabPane's head display text | | tab | ReactNode | - | current tab's title corresponding to current tabPane | | className | string | - | to define a class name for an element | | style | CSS properties | - | object with css properties for styling | | disabled | boolean | false | set TabPane disabled | | children | ReactNode | - | TabPane's head display content | | forceRender | boolean | false | forced render of content in tabs, not lazy render after clicking on tabs | | closable | boolean | false | closable feature of tab item | | closeIcon | ReactNode | - | Config close icon | | prefixCls | string | 'rc-tabs-tab' | prefix class name, use to custom style | | id | string | - | unique identifier | | animated | boolean | { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | config animation | | destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab | | active | boolean | false | active feature of tab item | | tabKey | string | - | key linked to tab |

TabPane(support in older versions)

| name | type | default | description | | --- | --- | --- | --- | | destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab | | 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

Responsive Tabs

There are 3 cases when handling responsive 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.