React Tabs component.
http://localhost:8000/examples
online example: https://tabs.react-component.now.sh/
- left and up: tabs to previous tab
- right and down: tabs to next tab
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,
);| 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 } | - |
| locale | { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } | - | Accessibility locale help text |
| moreIcon | ReactNode | - | collapse icon |
| 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 |
| 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 |
npm install
npm start
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-tabs is released under the MIT license.
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.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent