fes.js/packages/fes-doc/docs/ui/tab.md

pageClass
comp-page-class

Tabs 标签页

概述

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

代码示例

1

2

3

Tabs的value值或者说v-modal值表示Tabs当前激活项。

Tab的name属性默认是在Tabs的中index，从1开始。

Tab的name等于Tabs的value值，则激活此Tab

1

2

3

设置type为card。

1

2

3

设置Tab的icon，可以在Tab显示一个Icon

设置Tab的disabled，则禁用该Tab项

{{item}}

增加

在Tabs添加slot为action的元素显示在Tab的头部最右边

配置closable，则选项可以被删除。删除时触发on-tab-remove事件，参数为删除项的name

当选项过多时，自动出现左右切换的按钮

1

2

3

配置draggable，则选项可以被拖拽排序，拖拽后触发on-tab-change事件。

1

2

3

传入vue组件实现自定义的标题。

API

Tabs Props

属性	说明	类型	默认值
value	可以使用v-modal, 表示当前激活的是那一项	String|Number	1
type	可选值有card, 如果没配置则显示默认样式	String
closable	选项是否可删除	Boolean	false
draggable	选项是否可拖拽	Boolean	false

Tabs Events

事件名	说明	返回值
on-click	tab被点击时触发	(name)
on-tab-remove	tab被删除时触发	(name, index)
on-tab-change	拖拽排序时触发	({ from:index, to:index })

Tab Props

属性	说明	类型	默认值
name	用于标识当前选项卡	String	null
label	选项卡头部显示的文案，或者是自定义的组件	String|Object	null
icon	选项卡头部显示的icon	String	null
disabled	是否禁用该选项卡	Boolean	false