Skip to content
On this page
你当前查看的文档是tmui3.2.0(已不再支持NVUE)
[tmui3.1.x nvue点我] [tmui4.x uniappx原生开发代替nvue]

导航组件

标签导航 TmTabs

tabs标签导航组件,样式非常丰富可以完成你想要的自定义样式.

🌶️ 示例

查看模拟效果
示例模板
vue
<script setup lang="ts">
import { ref, computed, onMounted, watch, PropType } from 'vue';
const data2 = ref(['待配送', '售后中', { id: 'tmui', title: '待收款', dot: 'hot' }])
const data3 = ref(['待配送', { id: 'tmui', title: '待收款', dot: 22 }, '售后中'])
const data = ref(['全部', { id: 'tmui', title: '待收款', dot: 'hot' }, '待配送', '售后中', { title: '已退款', dot: 3 }, '待配送', '售后中', '已退款'])

</script>
<template>
    <view>
        <tm-sheet :margin="['0', '0', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">标签导航 tmTabs</tm-text>
            <tm-text color="#999999">tabs标签导航组件,样式非常丰富可以完成你想要的自定义样式.</tm-text>
        </tm-sheet>
        <tm-tabs :list="data"></tm-tabs>
        <tm-sheet :margin="['0', '20', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b">均分</tm-text>
        </tm-sheet>
        <tm-tabs item-width="33.33%" :list="data2"></tm-tabs>
        <tm-sheet :margin="['0', '20', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b">均分线等宽修改激活色</tm-text>
        </tm-sheet>
        <tm-tabs item-width="33.33%" gap="0" line-full line-height="2px" active-title-color="warn"
            :list="data2"></tm-tabs>
        <tm-sheet :margin="['0', '20', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b">自定背景相关</tm-text>
        </tm-sheet>
        <tm-tabs item-width="33.33%" gap="0" line-full line-height="2px" color="primary" dot-bg-color="warn"
            title-color="#acdaff" active-title-color="white" :list="data3"></tm-tabs>
        <tm-sheet :margin="['0', '20', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b">使用自定style完全覆盖样式</tm-text>
        </tm-sheet>
        <tm-tabs 
        custom-item-style="color:#000;"
        active-item-style="background:#f5f5f5"
        :list="data"></tm-tabs>
    </view>
</template>
<style scoped>
.tmTabsWrapBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 200px;
    height: 44px;
}
</style>

🌶️ 兼容性

平台兼容

H5uniAPP小程序version
☑️☑️☑️☑️

🌱 参数

参数名类型默认值描述
roundstring|number0圆角
widthstring|number"auto"
heightstring|number"88"高是必填,不可为auto。
modestring"start"排版模式around:居中并且均分[数据多时会造成无法滚动]between:均分在整个宽上(如想相项目宽一样,你可以设置属性width比如你有3个可以设置为33%)[数据多时会造成无法滚动]start:左对齐[数据多时可滚动]end:右对齐[数据多时可滚动]center:中间对齐[数据多时会造成无法滚动]
colorstring"white"背景
darkColorstring""暗黑时的背景,如果不填写读取sheetDark
activeTitleColorstring""文本激活时的颜色,空值默认取全局主题色
titleColorstring"#888888"文本默认颜色
darkTitleColorstring"#cacaca"文本默认的暗黑颜色,如果不填写取白色。
lineColorstring""底部线条激活时的颜色,空值默认取全局主题色
lineHeightstring"3px"-
lineFullbooleanfalse底部的线条是与项目等宽还是固定默认的小宽度。
showLinebooleantrue是否显示底部的线条
modelValuestring|number0id值,如果数据没有提供id属性,这里的id就是索引等同v-model
fontSizestring|number"30"标题字号
activeFontSizestring|number"32"激活时的标题字号
itemWidthstring|number"auto"项目宽度,默认是auto,即自动根据标题内容自动撑开宽度。如果你想均分(适合不超过一行),比如你有5个标签,那么你就可以设置为"20%"
titlePaddingstring|number"12px"标题的padding是左右的间隙。
moveCountnumber2选中当前项是,移动的差值个数。比如你要让选中的居中,你一屏内刚好显示5个,你就设置为2,如果你一屏显示3个,就设置为1,就是你一屏内里面要显示的是单数,才好控制选中的始终是在中间位置。
gapstring|number20项目之间的间隙.如果你设定了itemwidth一般会有富余宽,两边自然有间隙,此时你应该设置为0以免造成不居中的假象.
listArray<Record<string, any> | string>()=>[]数据数组,可以混合类型可以是单类型数据格式比较灵活.如果数据是对象且出现了dot:true该项数组右上角出现角标红点如果dot:非boolean比如:dot:32会出现数字角标或者文本角标.如果为false或者空值为隐藏
rangKeystring"title"当你的list为对象时可用如果数据是string会直接取数据本身
rangIdstring"id"id标识,用来vmodel双向绑定选中的值,如果你的list中不存在或者没有id标识那么取数组循环的索引值
rangDotstring"dot"读取角标的标识字段,默认是dot
dotBgColorstring""角标的背景,默认是等同激活的标题颜色如果填写使用本值,文字颜色始终是白的.
customItemStylestring""默认的自定项目的style样式,可以用来完全覆盖默认的样式.
activeItemStylestring""默认的激活自定项目的style样式,可以用来完全覆盖默认的样式.

🌹 事件

事件名参数返回数据描述
change--变化时触发
update:modelValue--同步vmodel

🌽 slot插槽

插槽名数据描述

🥗 ref方法

方法名参数返回值描述
toggleActivate---