Appearance
tabs切换组件
Element Plus Tabs Documentation
Hidden Title
基础用法:
<s-tabs :options="navList"></s-tabs>属性事件插槽简介
基础用法
尺寸
胶囊类型
chenghua主题
石景山主题
通常用法
Slots
Trigger click|hover
children 支持嵌套 el-tab-pane
other
addRemove
位置
可以通过 tab-position 设置标签的位置
标签一共有四个方向的设置 tabPosition="left|right|top|bottom"
属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue | 当前激活 tab | string / number / boolean | - |
options | 标签页配置 | array | [] |
label | 标签标题字段名 | string | label |
value | 标签值字段名 | string | value |
subAttrs | 透传给 el-tab-pane 的属性 | object | {} |
trigger | 切换触发方式,支持 click / hover | string | click |
type | 标签类型,支持 capsule 和 Element Plus 原生 card / border-card 等类型 | string | 按内部组件或 Element Plus 对应属性 |
theme | 主题样式,支持 default / chenghua / shijingshan | default / chenghua / shijingshan | default |
size | 尺寸,支持 small / default / large | string | default |
事件
| 事件名 | 说明 |
|---|---|
update:modelValue | 当前激活 tab 变化时触发 |
插槽
| 插槽名 | 说明 |
|---|---|
default | 自定义整个 tabs 内容 |
${value} | 自定义每个 tab-pane 内容,名称为选项值 |
${value}-label | 自定义每个 tab 标题区域 |