react-component/tabs

README

@rc-component/tabs

_{Part of the Ant Design ecosystem.}

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

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

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`, `open`, etc. are also supported.

Dropdown 2 uses more.open and more.onOpenChange. The previous more.visible and more.onVisibleChange props are no longer supported and must be migrated when upgrading.

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.