Tab 标签页

Tab 标签页

#介绍

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

#引入

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

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

Vue.use(Tab);
Vue.use(TabPane);

#代码演示

#基础用法

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>

#标签页头部样式

通过设置 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>

#头部位置

设置 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>

#自定义头部

通过 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>

#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	自定义标签头部