TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
387
1.7m

标签 xTag ​

在线预览
在线模拟尺寸:

介绍 ​

标签组件，可用于属性的提醒，显示，强调用。

平台兼容 ​

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

文件路径 ​

ts

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

使用 ​

ts

<x-tag></x-tag>

Props 属性 ​

名称说明类型默认值
_class额外的 class 名（会追加到组件根节点）
string''
_style额外的内联样式字符串
string''
color标签主色
string''
bgColor背景色（浅色模式）
string''
darkBgColor背景色（深色模式）
string''
linearGradient线性渐变颜色数组（如 ['to bottom','#00f', '#0ff']）
Array():string[] => [] as string[]
fontColor文本颜色
string''
fontSize文本字号，例如 '24rpx','24px','24'
string''
round圆角半径，默认单位 px
number-1
border边框宽度，默认单位 px
number1
borderColor边框颜色（浅色模式）
string''
darkBorderColor边框颜色（深色模式）
string''
skin预设皮肤/风格类型
SkinType'default' as SkinType
icon左侧图标名称或资源
string''
size组件尺寸（预设枚举）
SizeType'normal' as SizeType
url点击后跳转的链接地址
string''
disabled是否禁用
booleanfalse
loading是否显示加载状态
booleanfalse
height组件高度，例如 '48rpx','48','48px'
string''

Events 事件 ​

名称参数说明
click--

Slots 插槽 ​

名称说明数据
default默认插槽-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/chongyong/tag

示例源码 ​

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">标签 Tag</x-text>
			<x-text color="#999999" >和按钮类似，不同的是标签是根据内容自动增长宽。布局请布局在flex容器中。</x-text>
		</x-sheet>

		<x-sheet class="flex flex-row">
			<x-tag size="mini" class="mb-12 mr-8">标签</x-tag>
			<x-tag size="small" class="mb-12 mr-8">标签</x-tag>
			<x-tag size="mdeium" class="mb-12 mr-8">标签</x-tag>
			<x-tag size="normal" class="mb-12 mr-8">标签</x-tag>
			<x-tag size="large" class="mb-12">标签</x-tag>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">预设 Skin</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row">
			<x-tag skin="default" class="mb-12 mr-8">主标签</x-tag>
			<x-tag skin="outline" class="mb-12 mr-8">镂空</x-tag>
			<x-tag skin="outline" color="success" class="mb-12 mr-8">镂空</x-tag>
			
			<x-tag skin="dashed" class="mb-12 mr-8">虚线</x-tag>
			<x-tag darkBgColor="#222222" darkBorderColor="#373737"  skin="thin" class="mb-12">浅色主题标签</x-tag>
			<x-tag skin="text" class="mb-12">文本</x-tag>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">状态 Status</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row">
			<x-tag size="mdeium" class="mb-12 mr-8" color="success">成功</x-tag>
			<x-tag class="mb-12 mr-8">主题色</x-tag>
			<x-tag size="normal" class="mb-12 mr-8" color="warn">警告</x-tag>
			<x-tag size="large" class="mb-12 mr-8" color="danger">危险</x-tag>
			<x-tag color="error" size="large" class="mb-12 mr-8">自定颜色</x-tag>
		</x-sheet>
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b">图标及渐变 Icon</x-text>
		</x-sheet>
		<x-sheet class="flex flex-row">
			<x-tag :border="0" :round="66" :linearGradient="['left','#063CFF','#FF3F3F']" icon="checkbox-circle-line"
				size="mdeium" class="mb-12 mr-8" status="success">图标</x-tag>
			<x-tag :border="0" :round="66" :linearGradient="['right','#FF896D','#D02020']" icon="lock-2-line"
				size="normal" class="mb-12 mr-8" status="warn">图标</x-tag>
			<x-tag :border="0" :round="66" :linearGradient="['right','#00B960','#00552C']" icon="shield-user-line"
				size="large" class="mb-12 mr-8" status="danger">图标</x-tag>
			<x-tag :border="0" :round="66" :linearGradient="['right','#FFDC99','#FF62C0']" icon="upload-cloud-line"
				color="red" size="large" class="mb-12 mr-8">图标</x-tag>
		</x-sheet>
		<view style="height:100px"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
	
</script>

<style lang="scss">

</style>
最近更新