组件库文档 tmui.design
选项卡 Tabs
可以单独使用，配合tm-tabs-pane可实现卡片内容切换。
🌶️ 选项卡 Tabs 示例
查看模拟效果＋
示例模板
vue
<template>
<tm-app>
<tm-sheet>
<tm-tabs @change="tabschange" showTabsLineAni :list="tabsTitle" :item-width="180" :width="636" default-name="2"></tm-tabs>
</tm-sheet>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="下面的示例为单独使用"></tm-text>
<tm-divider></tm-divider>
<tm-tabs :list="tabsTitle" :width="636" default-name="1"> </tm-tabs>
</tm-sheet>
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="其它一些属性特性"></tm-text>
<tm-divider></tm-divider>
<tm-tabs
:list="tabsTitle"
:border="1"
:width="636"
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="text-weight-b" label="渐变背景"></tm-text>
<tm-divider></tm-divider>
<tm-tabs :list="tabsTitle" :width="636" default-name="1" :round="2" color="red" activeFontColor="yellow" linear="left">
</tm-tabs>
<tm-divider></tm-divider>
<tm-text :font-size="24" _class="text-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="text-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' }
])
const tabsTitle2 = ref([
{ key: '1', title: '选项1', icon: 'tmicon-ios-leaf' },
{ key: '2', title: '选项2', icon: 'tmicon-ios-umbrella' },
])
function tabschange(key: string | number) {
console.log(key)
}
</script>🌶️ 兼容性
| APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
|---|---|---|---|---|
| ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| list | ArrayasPropType<Array<tabsobj>> | ()=>[] | tabs选项数据,格式见下方 |
| rang-key | title | ()=>[] | list标题字段值，默认是title |
| color | String | "white" | tabs背景颜色 |
| transprent | [Boolean,String] | false | 是否透明 |
| width | Number | 500 | 宽度，单位rpx |
| itemHeight | Number | 80 | 高度,单位rpx |
| height | Number | 1000 | 高度，单位rpx |
| gutter | Number | 0 | 内容在bar中的上下间隔 |
| defaultName | [String,Number] | "" | 默认值 |
| activeName | [String,Number] | "" | 当前活动项。v-model:active-name |
| tabPos | String | 'top' | top导航在上方，bottom导航在下方 |
| itemWidth | Number | 0 | 项目的宽度 |
| activeColor | String | "primary" | tab选中的背景颜色 |
| tabs-line-ani-color | String | "primary" | 启用线条动画时的，线条颜色 |
| activeFontColor | String | "primary" | tab选中的字体颜色 |
| activeFontSize | Number | 30 | tab选中的字体大小颜色 |
| itemModel | String | "text" | line底部线条，card背景颜色模式，text文本模式,textLight背景减淡模式，文字会变灰 |
| unSelectedColor | String | "" | 默认为空即根据主题自定颜色。 |
| itemFontSize | Number | 28 | 字体大小 |
| itemLinear | String | "" | 渐变背景方向，可选left:右->左，right:左->右。top:下->上，bottom:上->下。 |
| itemLinearDeep | String | "light" | 渐变的亮浅，可选light,dark,accent亮系渐变和深色渐变 |
| itemRound | Number | 0 | 圆角 |
| align | String | "left" | left:左对齐,right：右对齐,center：居中,around：居中均分 |
| swiperv3.0.75+ | [Boolean] | false | 是否启用左右滑动内容来切换tabs,开启后注意优化页面性能。 |
| showTabsLineAniv3.0.77+ | [Boolean] | false | 是否启用底部边线动画，点击某一项时，短线自动滑动到目标点=>使用动画必须指定宽度:item-width="110(宽度)" |
| showTabsLine | Boolean | true | 用于开启线性动画后，是否隐藏底部灰色的导轨 |
| darkBgColor | String | '' | 有时自动的背景，可能不是你想要暗黑背景，此时可以使用此参数，强制使用背景色 |
| subtract | Number | 2 | 当选中某一项时,内容会往前滚动的项目数量,类似于位置让选中项始终在中间 |
tabsobj的类型如下：
ts
{
key: string | number,//唯一标识
title: string,//标题
icon?: string,//图标
dot?:boolean,//是否显示角标点
dotColor?:string,//角标点的颜色
count?: string | number//角标展示的文本
} 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 | 是否透明 |
| color | String | "white" | 背景颜色 |
| name | [String,Number] | "" | name是tabs唯一标识符,不允许为空，且必须为数字或者字符串 |
| title | String | "" | 每一项的文字 |
| icon | String | "" | 每一项的图标 |
| dot | Boolean | false | 是否显示角标点 |
| dotColor | String | "red" | 角标点的颜色 |
🌹 事件
无
🌽 slot插槽
默认default
🥗 ref方法
无
💏 文档贡献
此页文档由夏天贡献，如果对该框架感兴趣的可以参与我们一同进步！