DolphinHybrid
点我扫二维码，查看demo

# Tab 标签页

# 介绍

标签页组件用于多页面之间的切换。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Tab, TabPane } from '@dolphin-iot/ui'

Vue.use(Tab);
Vue.use(TabPane);
1
2
3
4
5

# 代码演示

# 基础用法

v-model 默认绑定选中标签的索引值，通过修改 v-model 即可切换选中的标签。

<template>
    <mx-tab v-model="active" >
        <mx-tab-pane title="title1">
            tab1
        </mx-tab-pane>
        <mx-tab-pane title="title2">
            tab2
        </mx-tab-pane>
        <mx-tab-pane title="title3">
            tab3
        </mx-tab-pane>
        <mx-tab-pane title="title4">
            tab4
        </mx-tab-pane>
        <mx-tab-pane title="title5">
            tab5
        </mx-tab-pane>
        <mx-tab-pane title="title6">
            tab6
        </mx-tab-pane>
        <mx-tab-pane title="title7">
            tab7
        </mx-tab-pane>
        <mx-tab-pane title="title8">
            tab8
        </mx-tab-pane>
        <mx-tab-pane title="title9">
            tab9
        </mx-tab-pane>
        <mx-tab-pane title="title10">
            tab10
        </mx-tab-pane>
    </mx-tab>
</template>
<script>
    export default {
        data(){
            return {
                active: 1
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 标签页头部样式

通过设置 type 属性可以设置标签页组件头部样式, type 支持 line button none 三种样式。 默认为值为 line。将 type 设置为 button 时，此时头部显示为按钮样式。设置为 none 时，头部只显示文本

<template>
    <mx-tab v-model="active" type="button" title-active-color="#fff" header-class="bg-red">
        <mx-tab-pane title="title1" icon="star">
            tab1
        </mx-tab-pane>
        <mx-tab-pane title="title2">
            tab2
        </mx-tab-pane>
        <mx-tab-pane title="title3">
            tab3
        </mx-tab-pane>
        <mx-tab-pane title="title4" icon="search">
            tab4
        </mx-tab-pane>
        <mx-tab-pane title="title5">
            tab5
        </mx-tab-pane>
    </mx-tab>
</template>
<script>
    export default {
        data(){
            return {
                active: 2
            }
        }
    }
</script>
<style>
.bg-red{
    background:red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 头部位置

设置 position 属性可以更改标签页头部显示的位置, 支持 top bottom left right四种方式。默认为 top。

<template>
    <mx-tab v-model="active" position="left" >
            <mx-tab-pane title="title1">
                tab1
            </mx-tab-pane>
            <mx-tab-pane title="title2">
                tab2
            </mx-tab-pane>
            <mx-tab-pane title="title3">
                tab3
            </mx-tab-pane>
            <mx-tab-pane title="title4">
                tab4
            </mx-tab-pane>
            <mx-tab-pane title="title5">
                tab5
            </mx-tab-pane>
            <mx-tab-pane title="title6">
                tab6
            </mx-tab-pane>
            <mx-tab-pane title="title7">
                tab7
            </mx-tab-pane>
            <mx-tab-pane title="title8">
                tab8
            </mx-tab-pane>
            <mx-tab-pane title="title9">
                tab9
            </mx-tab-pane>
            <mx-tab-pane title="title10">
                tab10
            </mx-tab-pane>
        </mx-tab>
</template>
<script>
    export default {
        data(){
            return {
                active: 0
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 自定义头部

通过 tab-pane 组件的 title 插槽 可以自定义头部标题。

<template>
    <mx-tab v-model="active" type="none">
        <mx-tab-pane>
            <template v-slot:title="{active}">
                <mx-button  size="small" icon="star" :theme="active?'cyan':'brand'">title1</mx-button>
            </template>
            tab1
        </mx-tab-pane>
        <mx-tab-pane>
            <template v-slot:title="{active}">
                <mx-button  size="small" icon="search" :theme="active?'cyan':'brand'">title2</mx-button>
            </template>
            tab2
        </mx-tab-pane>
        <mx-tab-pane>
            <template v-slot:title="{active}">
                <mx-button  size="small" icon="star-line" icon-position="right" :theme="active?'cyan':'brand'">title3</mx-button>
            </template>
            tab3
        </mx-tab-pane>
    </mx-tab>
</template>
<script>
export default {
    data(){
        return {
            active: 1
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Api

# Tab Props

参数 说明 类型 默认值 是否必须
value 选中的标签页索引,支持v-model number - 是
type 头部样式,可选值为 line none button string line -
position 头部位置,可选值为 top bottom left right string top -
duration 动画时长,只有在 animated 属性为 true 时有效 number | string 0.36 -
animated 是否开启动画 boolean false -
line-color 下划线颜色 string #000000 -
line-size 下线的尺寸 string | number 2 -
header-class 头部类名 string - -
title-active-color 选中标题的颜色 string #000000 -
title-inactive-color 为选中标题的颜色 string #8A8A8F -
title-active-background 选中标题的背景 （仅在 type = button 有效） string #000000 -
title-inactive-background 未选中标题的背景（仅在 type = button 有效） string #F9F9F9 -
title-active-size 选择标题的字体大小 number 14 -
title-inactive-size 未选中标题的字体大小 number 12 -
title-active-font-weight 选中标题的字重 string | number 600 -
title-inactive-font-weight 未选中标题的字重 string | number normal -

# Tab Events

事件名称 说明 回调参数
change 标签页切换时触发 active: 当前选中标签的索引

# TabPane Props

参数 说明 类型 默认值 是否必须
title 标签头部显示的名称 string - -
icon 标签头部显示的图标 string - -
icon-size 标签头部显示的图标大小 string | number 18 -

# TabBarItem Slots

名称 说明
default 标签页内容
title 自定义标签头部
更新时间: 12/14/2021, 9:38:18 AM

← Introduce 介绍 →