@rc-component/tabs

English | 简体中文

Highlights

• Supports top, bottom, left, and right tab positions with RTL layouts.
• Handles overflow with a dropdown operation menu.
• Supports editable tabs, extra tab bar content, indicators, and custom tab bars.
• Provides semantic classNames and styles slots for panel and navigation customization.

Install

npm install @rc-component/tabs

Usage

pure
import Tabs from '@rc-component/tabs';
import '@rc-component/tabs/assets/index.css';
const items = [   { key: 'overview', label: 'Overview', children: 'Overview content' },   { key: 'settings', label: 'Settings', children: 'Settings content' }, ];
export default () => <Tabs items={items} defaultActiveKey="overview" />;

Online preview: https://tabs.react-component.vercel.app/

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Tabs

| Name | Type | Default | Description | | --- | --- | --- | --- | | activeKey | string | - | Controlled active tab key. | | animated | boolean \| AnimatedConfig | { inkBar: true, tabPane: false } | Animation config. | | className | string | - | Additional class name. | | classNames | Partial<Record<SemanticName, string>> | - | Semantic class names. | | defaultActiveKey | string | - | Initial active tab key. | | destroyOnHidden | boolean | false | Destroy inactive tab panels. | | direction | 'ltr' \| 'rtl' | 'ltr' | Layout direction. | | editable | EditableConfig | - | Editable tab configuration. | | getPopupContainer | (node: HTMLElement) => HTMLElement | - | Popup container resolver. | | id | string | - | Root id. | | indicator | { size?: GetIndicatorSize; align?: 'start' \| 'center' \| 'end' } | - | Indicator size and alignment. | | items | Tab[] | [] | Tab items. | | locale | TabsLocale | - | Accessibility locale text. | | more | MoreProps | - | more dropdown config, see MoreProps for full API. Additionally supports popupRender for custom popup content. | | onChange | (activeKey: string) => void | - | Triggered when active tab changes. | | onTabClick | (activeKey, event) => void | - | Triggered when a tab is clicked. | | onTabScroll | ({ direction }) => void | - | Triggered when tab navigation scrolls. | | prefixCls | string | 'rc-tabs' | Prefix class name. | | renderTabBar | RenderTabBar | - | Custom tab bar renderer. | | style | React.CSSProperties | - | Root style. | | styles | Partial<Record<SemanticName, React.CSSProperties>> | - | Semantic styles. | | tabBarExtraContent | React.ReactNode \| TabBarExtraMap | - | Extra content beside the tab bar. | | tabBarGutter | number | 0 | Gap between tabs. | | tabBarStyle | React.CSSProperties | - | Tab bar style. | | tabPosition | 'left' \| 'right' \| 'top' \| 'bottom' | 'top' | Tab position. |

Tab

| Name | Type | Default | Description | | --- | --- | --- | --- | | children | React.ReactNode | - | Tab panel content. | | className | string | - | Panel class name. | | closable | boolean | - | Whether the tab can be closed in editable mode. | | closeIcon | React.ReactNode | - | Custom close icon. | | destroyOnHidden | boolean | false | Destroy inactive panel. | | disabled | boolean | false | Disable the tab. | | forceRender | boolean | false | Render panel before it becomes active. | | key | string | - | Required unique tab key. | | label | React.ReactNode | - | Tab label. | | style | React.CSSProperties | - | Panel style. |

MoreProps

| Name | Type | Default | Description | | --- | --- | --- | --- | | icon | ReactNode | - | The icon shown in the more trigger. | | popupRender | (menu: ReactElement, info: { restTabs: Tab[], onClose: () => void }) => ReactElement | - | Customize the dropdown popup content. The info object provides restTabs (all overflowed tabs) and onClose (function to close the dropdown). | | Other dropdown props | from DropdownProps | - | All other rc-dropdown props such as trigger, overlayClassName, visible, etc. are also supported. |

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/tabs is released under the MIT license.