Skip to content
On this page

组件库文档 tmui.design

选项卡 Tabs

可以单独使用,配合tm-tabs-pane可实现卡片内容切换。


🌶️ 选项卡 Tabs 示例

查看模拟效果
示例模板
vue
<template>
    <tm-app>
        <tm-sheet>
            <tm-tabs @change="tabschange" showTabsLineAni :item-width="140" :width="636" :height="500" default-name="2">
                <tm-tabs-pane :dot="item === 3" :count="item == 4 ? 33 : 0" v-for="(item, index) in 15" :key="index" :name="item"
                    :title="item % 2 ? '标题开滑动' : '标题'">
                    <tm-sheet :margin="[0, 0]">
                        <tm-text :font-size="30" _class="font-weight-b" color='red'
                            :label="item + ';本组件可以开启swiper属性,你现在可以尝试左右滑动。开启左右滑动,页面最好禁用滚动,以防与页面事件冲突。(当然是兼容了WEB pc端)'"></tm-text>
                        <tm-text :font-size="30" _class="font-weight-b"
                            :label="'开启左右滑动后,本组件已优化性能,只会渲染本身,以及前后的页面内容,也就是三个页面的内容,其它页面隐藏不显示。'"></tm-text>
                        <tm-divider></tm-divider>
                    </tm-sheet>
                </tm-tabs-pane>
            </tm-tabs>
        </tm-sheet>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-weight-b" label="下面的示例为单独使用"></tm-text>
            <tm-divider></tm-divider>
            <tm-tabs :list="tabsTitle" :width="636" :height="300" default-name="1">
            </tm-tabs>
        </tm-sheet>
        <tm-sheet>
            <tm-text :font-size="24" _class="font-weight-b" label="其它一些属性特性"></tm-text>
            <tm-divider></tm-divider>
            <tm-tabs :list="tabsTitle" :border="1" :width="636" :height="300" default-name="1" :round="2" color="grey"
                text activeFontColor="primary" unSelectedColor="grey-darken-2">
            </tm-tabs>
            <tm-divider></tm-divider>
            <tm-text :font-size="24" _class="font-weight-b" label="渐变背景"></tm-text>
            <tm-divider></tm-divider>
            <tm-tabs :list="tabsTitle" :width="636" :height="300" default-name="1" :round="2" color="red"
                activeFontColor="yellow" linear="left">
            </tm-tabs>
            <tm-divider></tm-divider>
            <tm-text :font-size="24" _class="font-weight-b" label="卡片式"></tm-text>
            <tm-divider></tm-divider>
            <tm-tabs @change="tabschange" :list="tabsTitle" align="center" :width="636"
                :height="300" default-name="1" :round="2" color="black" itemModel="card" activeColor="yellow"
                activeFontColor="black">
            </tm-tabs>
            <tm-divider></tm-divider>
            <tm-text :font-size="24" _class="font-weight-b" label="线式"></tm-text>
            <tm-divider></tm-divider>
            <tm-tabs :list="tabsTitle" align="center" :width="636" :height="300" default-name="1" itemModel="line"
                activeColor="primary" activeFontColor="primary">
            </tm-tabs>
        </tm-sheet>

    </tm-app>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmTabs from "@/tmui/components/tm-tabs/tm-tabs.vue"
import tmDivider from "@/tmui/components/tm-divider/tm-divider.vue"
import tmTabsPane from "@/tmui/components/tm-tabs-pane/tm-tabs-pane.vue"
const tabsTitle = ref([
    { key: "1", title: "选项1", icon: "tmicon-ios-leaf" },
    { key: "2", title: "选项2", icon: "tmicon-ios-umbrella" },
    { key: "3", title: "选项3", dot: true, dotColor: 'yellow', icon: "tmicon-ios-rocket" },
    { key: "4", title: "选项4", dot: false, count: "3", icon: "tmicon-ios-partly-sunny" },
])


function tabschange(key: string | number) {
    console.log(key)
}

</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
listArrayasPropType<Array<tabsobj>>()=>[]tabs选项数据,格式见下方
rang-keytitle()=>[]list标题字段值,默认是title
colorString"white"tabs背景颜色
transprent[Boolean,String]false是否透明
widthNumber500宽度,单位rpx
itemHeightNumber80高度,单位rpx
heightNumber1000高度,单位rpx
gutterNumber0内容在bar中的上下间隔
defaultName[String,Number]""默认值
activeName[String,Number]""当前活动项。v-model:active-name
tabPosString'top'top导航在上方,bottom导航在下方
itemWidthNumber0项目的宽度
activeColorString"primary"tab选中的背景颜色
tabs-line-ani-colorString"primary"启用线条动画时的,线条颜色
activeFontColorString"primary"tab选中的字体颜色
activeFontSizeNumber30tab选中的字体大小颜色
itemModelString"text"line底部线条,card背景颜色模式,text文本模式,textLight背景减淡模式,文字会变灰
unSelectedColorString""默认为空即根据主题自定颜色。
itemFontSizeNumber28字体大小
itemLinearString""
itemLinearDeepString"light"
itemRoundNumber0圆角
alignString"left"left:左对齐,right:右对齐,center:居中,around:居中均分
swiperv3.0.75+[Boolean]false是否启用左右滑动内容来切换tabs,开启后注意优化页面性能。
showTabsLineAniv3.0.77+[Boolean]false是否启用底部边线动画,点击某一项时,短线自动滑动到目标点=>使用动画必须指定宽度:item-width="110(宽度)"
showTabsLineBooleantrue用于开启线性动画后,是否隐藏底部灰色的导轨
darkBgColorString''有时自动的背景,可能不是你想要暗黑背景,此时可以使用此参数,强制使用背景色
subtractNumber2当选中某一项时,内容会往前滚动的项目数量,类似于位置让选中项始终在中间

tabsobj的类型如下:

ts
{
	key: string | number,//唯一标识
	title: string,//标题
	icon?: string,//图标
	dot?:boolean,//是否显示角标点
	dotColor?:string//角标点的颜色
} as Tmui.tabs
//or
{
	//也可以把key写成id,
	id: string | number,//唯一标识
	....
} as Tmui.tabs

🌹 事件

事件名参数返回数据描述
update:activeName当前key-当前选中项的key值,v-model:active-name
change当前key-当前选中项的key值
click

🌽 slot插槽

默认default

🥗 ref方法

选项卡面板 Tabs-Pane

不可以单独使用,必须放置在tm-tabs组件中使用。


🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
transprent[Boolean,String]false是否透明
colorString"white"背景颜色
name[String,Number]""name是tabs唯一标识符,不允许为空,且必须为数字或者字符串
titleString""每一项的文字
iconString""每一项的图标
dotBooleanfalse是否显示角标点
dotColorString"red"角标点的颜色

🌹 事件

🌽 slot插槽

默认default

🥗 ref方法

💏 文档贡献

此页文档由夏天贡献,如果对该框架感兴趣的可以参与我们一同进步!