@tant/rc-tabs

xm-tabs

介绍

组件采用的是导航栏和内容面板分开的模式设计。导航栏组件可以使用TabsNav，面板组件使用TabsPanel，同时提供标签页基本操作函数HOOKuseTabsNav，请按需取用。

组件支持标签新增、修改、关闭（自己、其他，已保存，右侧）、固定、编辑等，但是本组件是底层组件，不包含任何第三方UI组件，如需开箱即用的组件，可以使用上层封装组件@xmzhou/semi-tabs。

安装

npm instal @tant/rc-tabs

API

标签页-配置内容

参数	是否必填	类型	说明	默认值
key	必填	string	当标签的唯一标识	''
label	必填	string	标签的名称	''
closeable	可选	boolean	标签是否可关闭	true
fixed	可选	boolean	标签是否固定	false
edited	可选	boolean	标签是否已编辑	false

TabsNav-API

参数	是否必填	类型	说明	默认值
tabKey	可选	标签配置 ['key']	当前活动标签key，需要唯一	-
tabList	必填	标签配置 []	标签列表	[]
className	可选	string	组件样式	''
maxTabWidth	可选	number	最大标签宽度	226
minTabWidth	可选	number	最小标签宽度	76
tabRender	可选	(tab: 标签配置) => ReactNode	自定义标签渲染函数	-
addRender	可选	() => ReactNode	自定义渲染标签添加	-
moreRender	可选	() => ReactNode	自定义渲染更多内容	-
extraRender	可选	() => ReactNode	自定义渲染标签页右侧内容	-
tabOperRender	可选	(tab: 标签配置) => ReactNode	自定义渲染标签后面的操作区域	-
tabContextMenuRender	可选	(tab: 标签配置, tabNode: ReactNode) => ReactNode	自定义渲染标签右击下拉组件	-
tabTipRender	可选	(tab: 标签配置, tabNode: ReactNode) => ReactNode	自定义渲染标签炫富内容	-
onChange	可选	(tabKey: 标签配置 ['key'] | undefined, tabList: 标签配置[]) => void	数据变动时触发，提供最新选中标签key和列表，标签拖动后触发	-

TabsPanel-API

参数	是否必填	类型	说明	默认值
cacheNum	可选	number	普通标签缓存数量，超过的将被清除dom	5
fixedCacheNum	可选	number	固定标签缓存数量，超过的将被清除dom	5
children	必填	(tabKey: 标签配置 ['key'], data: any, hanleChange: (tabKey: 标签配置 ['key'], data: any) => void	Promise<void>) => ReactNode	内容渲染函数
onChange	可选	(tabKey: 标签配置 ['key'], data: any, isClose?: boolean) => void	Promise<void>	修改标签内容修改时触发
onInit	可选	(tabKey: 标签配置 ['key'], tab: 标签配置) => any	Promise<any>	标签初次渲染时触发，用以返回内容相关数据
ref	可选	标签配置	内部缓存操作函数	-

TabsPanel REF参数

参数	类型	说明
add	(tab: 标签配置) => void | Promise<void>	新增标签
update	(oldTab: 标签配置, newTab: Partial<标签配置>) => void | Promise<void>	更新标签信息
close	(tab: 标签配置, check: (tab: 标签配置) => Promise<boolean>) => boolean | Promise<boolean>	关闭标签，返回结果告知是否需要中断后续操作，当关闭未保存标签可能会用到
closeAll	(check: (tab: 标签配置) => Promise<boolean>) => void | Promise<void>	关闭所有标签，不包含固定标签
closeOther	(tab: 标签配置, ccheck: (tab: 标签配置) => Promise<boolean>) => void | Promise<void>	关闭其他标签，不包含固定标签
fixed	(tab: 标签配置, fixed: boolean) => void | Promise<void>	固定/取消固定标签
closeRight	(tab: 标签配置, ccheck: (tab: 标签配置) => Promise<boolean>) => void | Promise<void>	关闭右侧标签，不包含固定标签
closeSaved	() => void | Promise<void>	关闭已保存标签，不包含固定标签
edited	(tab: 标签配置, edited: boolean) => void | Promise<void>	标签修改

useTabsNav 返回参数

参数	类型	说明
update	(tabKey: 标签配置['key'], data: any) => void	更新内容
update	(tabKey: 标签配置['key'], tab?: 标签配置) => void	打开标签或更新标签，用以触发内容渲染
close	(tabKey: 标签配置['key']) => void	标签关闭