@rc-component/tabs

_{Part of the Ant Design ecosystem.}

📑 Flexible React tabs with overflow, editable items, custom tab bars, and accessible panels.

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

importTabsfrom'@rc-component/tabs';import'@rc-component/tabs/assets/index.css';constitems=[{key: 'overview',label: 'Overview',children: 'Overview content'},{key: 'settings',label: 'Settings',children: 'Settings content'},];exportdefault()=><Tabsitems={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.