react-component
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
`tsx | pure
import Tabs from 'rc-tabs';
import ReactDom from 'react-dom';
const callback = (key) => { console.log(key); };
const items = [ { key: '1', label: 'Google', children: (
Lorem Ipsum is simply dummy text of the printing and typesetting
Amazon
, children: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...', disabled: true, }, { key: '3', label: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.