@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

*** 拖拽事件全面向原生看齐 ***

参数	变更类型	变更内容	解决的问题

| onBeforeDelete | deprecated | 废弃onDelete前置逻辑，直接在 onDelete 处理 | 优化易用性 | | onDropEnd | deprecated | 废弃onDelete前置逻辑，直接在 onDelete 处理 | 优化易用性 | | canScroll | deprecated | 现在不需要canScroll，会自动计算是否可滚动 | 优化易用性 | | max | deprecated | 现在不再内置收起效果，该字段没有存在意义 | 优化易用性 | | animation | deprecated | 动画效果为内置 | 优化易用性，删减无意义的配置项 | | onDragStart | update | 入参调整 | | | onDragOver | feature | 新增钩子 | | | onDragEnd | feature | 新增钩子 | | |extra | feature | 右侧额外操作区 | 功能增强 | | onDrop | update | 入参调整 | | | type | update | 选项移除 'editable'类型，, 默认type由'card'类型改为'line' | editable 拆为配置项更合理，根据通用场景，'line‘模式用的更多，故更改默认类型 | | editable | feature | 选项移除type 的 'editable'类型，迁移为一个配置项 | editable 拆为配置项更合理，解决editable 和 type的组合问题 |