选项卡

示例

入站规则
出站规则
关联云主机
出站规则
基本用法

Tab的基本用法。Tabs嵌套Tab使用,使用v-model进行双向数据绑定。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
data传值形式

还可以使用data,定义Tab内容

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
入站规则
出站规则
关联云主机
关联云主机
禁用某一项

Tab添加disabled属性,可以禁用该项选择

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
large1
large2
default1
defalut2
small1
small2
mini1
mini2
组件尺寸

通过size可以定义尺寸: default large small mini

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
入站规则
出站规则
关联云主机
入站规则
出站规则
关联云主机
入站规则
出站规则
关联云主机
卡片样式

改变type属性,可以呈现不同的样式,可选取值为:default card border-card no-border-card。其中no-border-card适用于具有背景色的场景

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)


Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
Tab 1
Tab 2
Tab 3
新增和关闭标签

Tabs添加closable属性,可以使所有标签可以关闭,当然你也可以通过Tabclosable属性单独控制该Tab是否可关闭。当点击关闭按钮时,Tabs会触发remove事件,并且将关闭的Tabvalue作为参数传给事件回调函数

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
入站规则
出站规则
关联云主机
入站规则
出站规则
关联云主机
入站规则
出站规则
关联云主机
入站规则
出站规则
关联云主机
垂直展示

Tabs添加vertical属性。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)

Tabs设计用于页面导航,所以没有定义切换内容区域,仅仅规定了头部样式。如果需要切换内容,可以使用v-if来切换。详见示例

属性

Tabs

属性 说明 类型 默认值
data 选项卡数据 Array []
value 被选中的选项卡,使用v-model进行双向绑定 * undefined
vertical 垂直排列 Boolean undefined
size 选项卡尺寸 "large" | "default" | "small" | "mini" "default"
type 选项卡类型 "default" | "card" | "border-card" | "no-border-card" "default"

Tab

属性 说明 类型 默认值
value 选中的值 * undefined
to 点击标签的跳转地址 String undefined
disabled 是否禁用 Boolean false

事件

Tab

事件名 说明 参数
click Tab点击事件,发生在value改变之后,disabled状态不会触发 Event