Tabs 标签页
用于创建包含内容区域的标签页
引入
import { Tabs } from 'mand-mobile'
Vue.component(Tabs.name, Tabs)
代码演示
基本
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-0">
<md-tabs
:titles="titles"
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
}
</script>
scope-slot
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-10">
<md-tabs
:titles="titles"
upside-down
>
<div slot="title"
slot-scope="props">
<md-icon name="hollow-plus" size="sm"></md-icon>
{{props.prefix}}{{props.title}}
</div>
<div v-for="(title, index) of titles" :key="index">
{{title.title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs, Icon} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
[Icon.name]: Icon,
},
data() {
return {
titles: [
{
title: '第1',
prefix: '我',
},
{
title: '第2',
prefix: '你',
},
{
title: '第3',
prefix: '他',
},
],
}
},
}
</script>
指定默认标签
默认标签2
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-2">
<md-tabs
:titles="titles"
:default-index="2"
show-ink-bar
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
}
</script>
禁用下划线动画
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-4">
<md-tabs
:titles="titles"
:ink-bar-animate="false"
show-ink-bar
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
}
</script>
监听点击事件
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-6">
<md-tabs
:titles="titles"
show-ink-bar
@indexChanged="alert"
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs, Toast} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
methods: {
alert(index, preIndex) {
Toast.succeed(`index由${preIndex}切换为${index}`)
},
},
}
</script>
无动画
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-8">
<md-tabs
:titles="titles"
noslide
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
}
</script>
不带下划线
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-1">
<md-tabs
:titles="titles"
:show-ink-bar="false"
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
}
</script>
设置标题栏边距
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-11">
<md-tabs
:titles="titles"
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
}
</script>
<style lang="stylus">
.md-example-child-tabs-11
.md-tab-bar
padding 0 100px
</style>
指定下划线长度
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-3">
<md-tabs
:titles="titles"
:ink-bar-length="40"
show-ink-bar
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
}
</script>
自定义内容
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-5">
<md-tabs
show-ink-bar
>
<div slot="title">
<div>
<md-icon name="hollow-plus" size="sm"></md-icon>
我
</div>
</div>
<div>
爱你
</div>
<div slot="title">
<div>
<md-icon name="cross" size="sm"></md-icon>
你
</div>
</div>
<div>
爱他
</div>
<div slot="title">
<div>
<md-icon name="right" size="sm"></md-icon>
他
</div>
</div>
<div>
爱她
</div>
</md-tabs>
</div>
</template>
<script>
import {Icon, Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Icon.name]: Icon,
[Tabs.name]: Tabs,
},
}
</script>
通过公共方法切换 selectTab(2)
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-7">
<md-tabs
ref="tabs"
:titles="titles"
show-ink-bar
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
mounted() {
window.triggerTabs = () => {
this.$refs.tabs.selectTab(2)
}
},
}
</script>
标题栏处于下方
<template>
<div class="md-example-child md-example-child-tabs md-example-child-tabs-9">
<md-tabs
:titles="titles"
upside-down
>
<div v-for="(title, index) of titles" :key="index">
{{title}}的内容
</div>
</md-tabs>
</div>
</template>
<script>
import {Tabs} from 'mand-mobile'
export default {
name: 'tab-bar-demo',
components: {
[Tabs.name]: Tabs,
},
data() {
return {
titles: ['第一', '第二', '第三', '第四'],
}
},
}
</script>
API
Tabs Props
属性 | 说明 | 类型 | 默认值 | 备注 |
---|---|---|---|---|
titles | 标签标题数组 | Array | - | 传入该数组会直接根据数组内容渲染组件,也可以不使用该属性,直接在控件中插入定制的标题按钮。在不使用scope-slot时,该值为字符串数组;在使用scope-slot时,该值为对象数组,每个对象会作为props供父组件使用 |
show-ink-bar | 是否显示下划线 | Boolean | true | - |
ink-bar-length | 下划线宽度 | Number | 70 | 该数值为下划线占标签按钮宽度的百分比,须在0-100之间 |
ink-bar-animate | 是否启用下划线动画 | Boolean | true | - |
default-index | 默认激活的标签索引 | Number | 0 | - |
noslide | 动画样式 | Boolean | false | 如果为真,则不显示滑动动画 |
Tabs Methods
selectTab(index)
选择某一标签
属性 | 说明 | 类型 |
---|---|---|
index | 标签索引 | Number |
Tabs Events
@change(index, preIndex)
标签索引发生变化事件
属性 | 说明 | 类型 |
---|---|---|
index | 改变后的标签索引 | Number |
preIndex | 改变前的标签索引 | Number |