小鹅通组件

# Tabs 标签页

分隔内容上有关联但属于不同类别的数据集合

# 初始化

单独引入时：在入口js文件处引入

import { Tabs, TabPane } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Tabs)
Vue.use(TabPane)
1
2
3
4

# 效果

# 基础用法


这是目录 这是评论 
<ss-tabs v-model="active">
  <ss-tab-pane name="dir" label="目录">这是目录</ss-tab-pane>
  <ss-tab-pane name="comment" label="评论">这是评论</ss-tab-pane>
</ss-tabs>
1
2
3
4

# card 类型 tab


这是目录 这是评论 
<ss-tabs v-model="active1" type="card">
  <ss-tab-pane name="dir" label="目录">这是目录</ss-tab-pane>
  <ss-tab-pane name="comment" label="评论">这是评论</ss-tab-pane>
</ss-tabs>
1
2
3
4

# 禁止选择


这是目录 这是评论 
<ss-tabs v-model="active1" >
  <ss-tab-pane name="dir" label="目录">这是目录</ss-tab-pane>
  <ss-tab-pane name="comment" label="评论">这是评论</ss-tab-pane>
</ss-tabs>
1
2
3
4
export default {
  data() {
    return {
      active: 'dir'
    }
  }
}
1
2
3
4
5
6
7

# Tabs Attributes

参数 说明 类型 默认值 可选值 支持版本
type 风格类型 String border-card card, border-card 1.3.16及其以上
value 绑定值 String — — -

# Tab-pane Attributes

参数 说明 类型 默认值 可选值
name 选项卡的 name String - -
disabled 是否禁用 boolean false

# 事件

事件名称 说明 回调参数
input 改变tabs时触发的事件 tabs name
tab-click 改变tabs时触发的事件 tabs-pane的el

← Tag 标签 →