TMUI4x(鸿蒙Next)

Appearance

广告位招租意向联系我
TMUI4x2025-09-03
452
1.9m

标签 xTag ​

在线预览
在线模拟尺寸:

介绍 ​

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

平台兼容 ​

H5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑️☑️☑️☑️4.44+1.1.9

文件路径 ​

ts

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

使用 ​

ts

<x-tag></x-tag>

Props 属性 ​

名称说明类型默认值
_class``string''
_style``string''
color主题名，名称或者合法的颜色值<br>默认为空时取全局的主题。string''
bgColor自定义背景色，优先级高于color和全局string''
darkBgColor暗黑时的自定义背景色string''
linearGradient渐变背景<br>数组格式如下<br>[<br> 方向:top,bottom,left,right,<br> 颜色1:<br> 颜色2<br> ]<br>例:['left','black','white']string[]() : string[] => []
fontColor自定义字体颜色优先级高于color自动生成string''
fontSize字号大小string""
round圆角数字number-1
border数字number1
borderColor自定义边框颜色 ，优先于color自动生成string""
darkBorderColor如果不填写，默认取xConfig里面的默认边线颜色值string""
skindefault 默认空值不作处理,<br>secondary 次要按钮，<br>text文本 按钮,<br>outline 线性，<br>dashed 虚线边框<br>thint 浅色浅色按钮（自动把color按理论值设置为浅色模式）string"default"
icon``string""
size尺寸<br>normal 标准<br>mini 超小<br>mdeium 中等<br>large 大string"normal"
url``string""
disabled禁用后无法点击booleanfalse
loading是否加载中booleanfalse
height自定义高度，可以是数字，单位或者百分比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="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>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">

</style>
最近更新