README.zh-CN.md

@rc-component/tabs

_{Ant Design 生态的一部分。}

📑 React 标签页组件，支持可编辑标签、溢出滚动和自定义渲染。

English | 简体中文

特性

• 支持 RTL 布局的顶部、底部、左侧和右侧选项卡位置。
• 使用下拉操作菜单处理溢出。
• 支持可编辑选项卡、额外选项卡栏内容、指示器和自定义选项卡栏。
• 为面板和导航自定义提供语义 classNames 和 styles 插槽。

安装

npm install @rc-component/tabs

使用

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" />;

在线预览：https://tabs.react-component.vercel.app/

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Tabs

名称	类型	默认值	说明
activeKey	string	-	受控的活动 Tab 键。
animated	boolean | AnimatedConfig	{ inkBar: true, tabPane: false }	动画配置。
className	string	-	附加 className。
classNames	Partial<Record<SemanticName, string>>	-	语义化类名。
defaultActiveKey	string	-	初始活动 Tab 键。
destroyOnHidden	boolean	false	销毁非活动标签页面板。
direction	'ltr' | 'rtl'	'ltr'	布局方向。
editable	EditableConfig	-	可编辑标签页配置。
getPopupContainer	(node: HTMLElement) => HTMLElement	-	弹层容器解析器。
id	string	-	根 ID。
indicator	{ size?: GetIndicatorSize; align?: 'start' | 'center' | 'end' }	-	指示器尺寸和对齐方式。
items	Tab[]	[]	选项卡项目。
locale	TabsLocale	-	无障碍本地化文本。
more	MoreProps	-	溢出下拉菜单配置，详情见 MoreProps。支持 popupRender 自定义弹层内容。
onChange	(activeKey: string) => void	-	当活动选项卡更改时触发。
onTabClick	(activeKey, event) => void	-	单击选项卡时触发。
onTabScroll	({ direction }) => void	-	当选项卡导航滚动时触发。
prefixCls	string	'rc-tabs'	前缀 className。
renderTabBar	RenderTabBar	-	自定义标签栏渲染函数。
style	React.CSSProperties	-	根样式。
styles	Partial<Record<SemanticName, React.CSSProperties>>	-	语义化样式。
tabBarExtraContent	React.ReactNode | TabBarExtraMap	-	标签栏旁的额外内容。
tabBarGutter	number	0	选项卡之间的间隙。
tabBarStyle	React.CSSProperties	-	标签栏样式。
tabPosition	'left' | 'right' | 'top' | 'bottom'	'top'	标签页位置。

Tab

名称	类型	默认值	说明
children	React.ReactNode	-	选项卡面板内容。
className	string	-	面板 className。
closable	boolean	-	是否可以在可编辑模式下关闭选项卡。
closeIcon	React.ReactNode	-	自定义关闭图标。
destroyOnHidden	boolean	false	销毁非活动面板。
disabled	boolean	false	禁用该选项卡。
forceRender	boolean	false	在面板变为活动状态之前渲染面板。
key	string	-	需要唯一的 Tab 键。
label	React.ReactNode	-	Tab 标签内容。
style	React.CSSProperties	-	面板样式。

MoreProps

名称	类型	默认值	说明
icon	ReactNode	-	更多按钮的图标。
popupRender	(menu: ReactElement, info: { restTabs: Tab[], onClose: () => void }) => ReactElement	-	自定义下拉弹层内容。info 对象提供 restTabs（所有溢出标签）和 onClose（关闭下拉菜单的函数）。
其他下拉属性	来自 DropdownProps	-	其他 rc-dropdown 属性如 trigger、overlayClassName、visible 等也都支持。

本地开发

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

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/tabs 基于 MIT 许可证发布。