@hi-ui/tabs NPM

`@hi-ui/tabs`

TODO: description

Usage

const Tabs = require('@hi-ui/tabs');

// TODO: DEMONSTRATE API

Props

Tabs

参数	说明	类型	可选值	默认值
type	标签类型	string	'desc' \| 'card' \| 'button' \| 'default'	'default'
placement	水平或竖直展示标签	string	'vertical' \| 'horizontal'	'horizontal'
defaultActiveId	设置默认激活的标签	React.ReactText	-	第一个选项卡
activeId	设置激活的标签，设置此值后变为受控模式	React.ReactText	-	-
draggable	是否支持拖拽	boolean	true \| false	false
editable	是否可编辑	boolean	true \| false	false
extra	右侧扩展区域	React.ReactNode	-	-

Tabs.Pane

参数	说明	类型	可选值	默认值
tabTitle	选项卡头显示文字	ReactNode	-	-
tabDesc	选项卡头描述文字，仅对 type='desc'时生效	ReactNode	-	-
tabId	每个标签的唯一标识	string \| number	-	-
disabled	标签是否禁用	boolean	true \| false	false
closeable	标签是否可以关闭，仅对 editable 为true时生效	boolean	true \| false	true

Events

名称	说明	类型	参数	返回值
onTabClick	点击标签页时触发，回调值为点击点击标签的 id	(tabId, event) => void	tabKey: 点击的标签 id, event: MouseEvent
onChange	点击标签页变更时触发，回调值为点击点击标签的 id	(tabId, event) => void	tabKey: 点击的标签 id, event: MouseEvent	-
onDragStart	节点开始拖拽时触发	(e: React.DragEvent,{dragNode: TabNode}) => void	dragNode: 拖拽节点
onDragOver	节点开始拖拽时触发	(e: React.DragEvent,{targetNode: TabNode}) => void	dragNode: 拖拽节点
onDragEnd	节点开始拖拽时触发	(e: React.DragEvent,{targetNode: TabNode}) => void	dragNode: 拖拽节点	-	-
onDrop	节点拖拽时触发	(e: React.DragEvent,{dragNode, targetNode, direction, }) => void	dragNode: 拖拽节点	-
onAdd	节点增加时触发	() => void	-	-
onDelete	点击删除节点按钮时触发	(deletedNode: TabNode,index) => void	deletedNode: 删除的节点, index: 删除的节点索引	-

CHANGELOG

拖拽事件全面向原生看齐 | 参数 | 变更类型 | 变更内容 | 解决的问题 | | ------------ | ------------------------------- | ------------------------------------------------------------------------------ | ---------------------------- |