组件库文档 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-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 | "" | |
itemLinearDeep | String | "light" | |
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//角标点的颜色
} 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方法
无
💏 文档贡献
此页文档由夏天贡献,如果对该框架感兴趣的可以参与我们一同进步!