TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
701
2.9m

标签导航 xTabs ​

在线预览
在线模拟尺寸:

介绍 ​

标签导航，常用于页面顶部导航时使用，角标，数字角标功能。如果使用了活动文字大小与未选中不一样的大小，那么要设定itemwidth

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-tabs/x-tabs.uvue

使用 ​

ts

<x-tabs></x-tabs>

Props 属性 ​

名称说明类型默认值
round圆角
string"0"
width宽
string"auto"
height高是必填，不可为auto。
string"44"
color背景
string"white"
darkColor暗黑时的背景,如果不填写读取sheetDark
string""
activeTitleColor文本激活时的颜色 ，空值默认取全局主题色
string""
titleColor文本默认颜色
string"#888888"
darkTitleColor文本默认的暗黑颜色，如果不填写取白色。
string"#cacaca"
lineColor底部线条激活时的颜色，空值默认取全局主题色
string""
lineGradient渐变背景
数组格式如下
[方向:top,bottom,left,right,自定义值例:45deg,颜色1:,颜色2]
例:['left','black','white']
如提供，暗黑及主题失效。
string[]() : string[] => []
lineHeight``
string"2px"
lineFull底部的线条是与项目等宽还是固定默认的小宽度。
booleanfalse
showLine是否显示底部的线条
booleantrue
list``
TABS_ITEM_INFO[]() : TABS_ITEM_INFO[] => [] as TABS_ITEM_INFO[]
modelValueid值，如果数据没有提供id属性，这里的id就是索引（但要转换为字符串）
等同v-model
string"0"
fontSize标题字号
string"16"
activeFontSize激活时的标题字号
string"16"
itemWidth项目宽度，默认是auto，即自动根据标题内容自动撑开宽度。
如果你想均分（适合不超过一行），比如你有5个标签，那么你就可以设置为"20%"
string"auto"
titlePadding标题的padding是左右的间隙。
string"12px"
isItemCenter是否让内容居中显示,
默认为false,如果你开启了项目超过了宽出现滚动时,会自动向左对齐以便
让内容能滚动,但如果内容少于可滚动,内容会自动居中.
booleanfalse
itemActiveStyle激活时的项目自定样式
string""
itemStyle未激活时的项目自定样式
string""
textActiveStyle激活时文本样式
string""
textStyle未激活时的文本样式
string""

Events 事件 ​

名称参数说明
changeitem: TABS_ITEMindex: number切换时触发
update:modelValue-当前选中的id值等同v-model

Slots 插槽 ​

名称说明数据
defaulttabs循环节点插槽,插件名称是tabs_+item.id,使用时请务必通过-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/daohang/tabs

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
			<navigation-bar :background-color="xThemeConfigNavBgColor"
				:front-color="xThemeConfigNavFontColor"></navigation-bar>
		</page-meta>
		<!-- #endif -->

		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">标签导航 Tabs</x-text>
			<x-text color="#999999">样式定义灵活，有效应对各种场景。</x-text>
		</x-sheet>

		<x-sheet>
			<x-tabs item-width="33.3%" :list="list"></x-tabs>
		</x-sheet>
		<x-sticky>
			<template v-slot:default="{status}">
				<x-tabs activeFontSize="18" :is-item-center="true" v-model="activeId" width="100%"
					:list="list3"></x-tabs>
			</template>
		</x-sticky>
		<view style="height:20px"></view>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">动态插槽定制</x-text>
			<x-tabs item-width="33.3%" :list="list" :showLine="false"
				item-active-style="background-color:rgb(5, 121, 255)" item-style="background-color:transparent">
				<template v-slot:default="{item,active}">
					<x-text :color="active?'white':'rgb(5, 121, 255)'"
						:style="active?'font-weight:bold;':''">{{item.title}}</x-text>
				</template>
			</x-tabs>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">定义样式</x-text>
		</x-sheet>
		<x-sheet>
			<x-tabs round="32" color="black" dark-color="black" title-color="rgba(255,255,255,0.6)"
				active-title-color="yellow" item-width="33.3%" :list="list"></x-tabs>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">定义线条，角标等</x-text>
		</x-sheet>
		<x-sheet :padding="['0']" :loading="loadingData">
			<x-tabs :line-gradient="['right','#0579ff','#7a00c6']" height="44" v-model="activeId2" :lineFull="true"
				itemWidth="33.3%" :list="list2"></x-tabs>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">过多标签，自动排列，并位移项目</x-text>
		</x-sheet>
		<x-sheet>
			<x-tabs v-model="activeId" :list="list3"></x-tabs>
			<view style="height: 600px;" class="mt-24">
				<x-button :block="true" @click="activeId='3'">变量控制切换{{activeId}}</x-button>
			</view>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup>
	import { TABS_ITEM_INFO, TABS_ITEM } from "@/uni_modules/tmx-ui/interface.uts"
	const list = ref<TABS_ITEM_INFO[]>([
		{ title: "全部" } as TABS_ITEM_INFO,
		{ title: "已完成" } as TABS_ITEM_INFO,
		{ title: "已删除" } as TABS_ITEM_INFO
	])
	const list2 = ref<TABS_ITEM_INFO[]>([])
	const list3 = ref<TABS_ITEM_INFO[]>([
		{ title: "全部" } as TABS_ITEM_INFO,
		{ title: "被禁用", disabled: true } as TABS_ITEM_INFO,
		{ title: "已删除" } as TABS_ITEM_INFO,
		{ title: "审核中" } as TABS_ITEM_INFO,
		{ title: "审核失败" } as TABS_ITEM_INFO,
		{ title: "售后中" } as TABS_ITEM_INFO,
		{ title: "已处理已处理" } as TABS_ITEM_INFO,
		{ title: "已处理2" } as TABS_ITEM_INFO,
		{ title: "已已处理处理3" } as TABS_ITEM_INFO,
		{ title: "已已处理处理4" } as TABS_ITEM_INFO,
		{ title: "已处理5" } as TABS_ITEM_INFO,
		{ title: "已处理8" } as TABS_ITEM_INFO,
	])
	const activeId = ref<string>("2")
	const activeId2 = ref<string>("-1")
	const loadingData = ref<boolean>(true)

	onReady(() => {
		/** 下面是模拟数据异步加载。 */
		activeId2.value = "1"
		setTimeout(function () {
			list2.value = [
				{ title: "全部" } as TABS_ITEM_INFO,
				{ title: "已完成", dotType: 'dot' } as TABS_ITEM_INFO,
				{ title: "已删除", dotType: 'label', dotText: '36' } as TABS_ITEM_INFO,
			] as TABS_ITEM_INFO[]
			loadingData.value = false
		}, 1500);
	})
</script>

<style lang="scss">

</style>
最近更新