tmui-cli 2.0.1 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/270/270/347/224/250/347/273/204/344/273/266//345/270/203/345/261/200/345/255/220/347/273/204/344/273/266 xCol.md"

@@ -0,0 +1,182 @@
+# 布局子组件 xCol
+
+## 介绍
+
+只能放置中x-row中布局
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-col/x-col.uvue
+```
+
+## 使用
+
+```ts
+<x-col></x-col>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| span | `列宽，它是根据row定义的总列宽计算具体的宽度值。`<br> | `union` | `3` |
+| offset | `可以输入%,数字或者带单位的偏移量`<br> | `union` | `'0'` |
+| _style | `自定义内部标签的style`<br>`请使用_style`<br> | `string` | `""` |
+| _class | `自定义内部标签的class,`<br>`请使用_class`<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 单元格被点击的事件 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/chongyong/row
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #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">布局 xRowCol</x-text>
+		<x-text color="#999999">响应式布局，快速生成排版布局,默认12列布局，可以自行更改列的总数。</x-text>
+	</x-sheet>
+
+	<x-row class="mx-12 mb-12" align="center">
+		<x-col style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">3</x-text></x-col>
+		<x-col style="background-color: #55b2eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">3</x-text></x-col>
+		<x-col style="background-color: #7de6a4;" _class="py-15"><x-text class="text-align-center "
+				color="white">3</x-text></x-col>
+		<x-col style="background-color: #d2b29c;" _class="py-15"><x-text class="text-align-center "
+				color="white">3</x-text></x-col>
+	</x-row>
+
+	<x-row class="mx-12 mb-12">
+		<x-col style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">3</x-text></x-col>
+		<x-col style="background-color: #55b2eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">3</x-text></x-col>
+		<x-col style="background-color: #7de6a4;" _class="py-15"><x-text class="text-align-center "
+				color="white">3</x-text></x-col>
+		<x-col style="background-color: #d2b29c;" _class="py-15"><x-text class="text-align-center "
+				color="white">3</x-text></x-col>
+	</x-row>
+	<x-row class="mx-12 mb-12">
+		<x-col :span="6" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">6</x-text></x-col>
+		<x-col :span="4" style="background-color: #55b2eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">4</x-text></x-col>
+		<x-col :span="2" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">2</x-text></x-col>
+	</x-row>
+	<x-row class="mx-12 mb-12">
+		<x-col :span="2" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">2</x-text></x-col>
+		<x-col :span="4" style="background-color: #55b2eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">4</x-text></x-col>
+		<x-col :span="6" style="background-color: #60cdff;" _class="py-15"><x-text class="text-align-center "
+				color="white">6</x-text></x-col>
+	</x-row>
+	<x-sheet>
+		<x-text font-size="18" class="text-weight-b">嵌套使用</x-text>
+	</x-sheet>
+	<x-row class="mx-12 mb-12">
+		<x-col :span="6" style="background-color: #ffffff;" _class="py-15">
+			<x-row>
+				<x-col :span="6" style="background-color: #e7c4ac;" _class="py-15"><x-text
+						class="text-align-center " color="white">6</x-text></x-col>
+				<x-col :span="6" style="background-color: #dea496;" _class="py-15"><x-text
+						class="text-align-center " color="white">6</x-text></x-col>
+			</x-row>
+		</x-col>
+		<x-col :span="6" style="background-color: #ececec;" _class="py-15">
+			<x-row>
+				<x-col :span="4" style="background-color: #f8d2b9;" _class="py-15"><x-text
+						class="text-align-center " color="white">4</x-text></x-col>
+				<x-col :span="4" style="background-color: #e7c4ac;" _class="py-15"><x-text
+						class="text-align-center " color="white">4</x-text></x-col>
+				<x-col :span="4" style="background-color: #d2b29c;" _class="py-15"><x-text
+						class="text-align-center " color="white">4</x-text></x-col>
+			</x-row>
+		</x-col>
+	</x-row>
+	<x-sheet>
+		<x-text font-size="18" class="text-weight-b">自动断行形成列</x-text>
+	</x-sheet>
+	<x-row class="mx-12 mb-12">
+		<x-col :span="12" style="background-color: #1692ff;" _class="py-15"><x-text class="text-align-center "
+				color="white">12</x-text></x-col>
+		<x-col :span="12" style="background-color: #1384e6;" _class="py-15"><x-text class="text-align-center "
+				color="white">12</x-text></x-col>
+		<x-col :span="12" style="background-color: #1171c5;" _class="py-15"><x-text class="text-align-center "
+				color="white">12</x-text></x-col>
+	</x-row>
+	<x-sheet>
+		<x-text font-size="18" class="text-weight-b">对齐,设置24列</x-text>
+	</x-sheet>
+	<x-row :col="24" class="mx-12 mb-12" justify="space-between">
+		<x-col :span="11" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">11</x-text></x-col>
+		<x-col :span="11" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">11</x-text></x-col>
+	</x-row>
+	<x-row :col="24" class="mx-12 mb-12" justify="space-between">
+		<x-col :span="7" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">7</x-text></x-col>
+		<x-col :span="7" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">7</x-text></x-col>
+		<x-col :span="7" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
+				color="white">7</x-text></x-col>
+	</x-row>
+	<view style="height:40px"></view>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/270/270/347/224/250/347/273/204/344/273/266//346/214/211/351/222/256 xButton.md"

@@ -0,0 +1,209 @@
+# 按钮 xButton
+
+## 介绍
+
+圆角，主题可通过配置统一设置或者动态全局设置，使设计风格统一并保持一致性。让你的风格独一无二。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-button/x-button.uvue
+```
+
+## 使用
+
+```ts
+<x-button></x-button>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| color | `主题颜色，空取全局`<br> | `string` | `''` |
+| darkColor | `暗黑主题颜色，空取全局`<br> | `string` | `''` |
+| bgColor | `自定背景色`<br> | `string` | `''` |
+| linearGradient | `渐变[方向，颜色1，颜色2]`<br> | `Array` | `():string[] => [] as string[]` |
+| fontColor | `字号颜色`<br> | `string` | `''` |
+| fontDarkColor | `暗黑字号颜色`<br> | `string` | `''` |
+| fontSize | `字号大小`<br> | `union` | `''` |
+| round | `圆角，空取全局`<br> | `union` | `''` |
+| border | `边线大小`<br> | `union` | `0.5` |
+| shadow | `投影[x,y,大小]`<br> | `Array` | `():Array<number string> => [] as number[]` |
+| borderColor | `边线颜色`<br> | `string` | `''` |
+| skin | `样式主题"default" \`<br>` "secondary" \`<br>` "text" \`<br>` "outline" \`<br>` "dashed" \`<br>` "thin"`<br> | `SkinType` | `'default' as SkinType` |
+| icon | `按钮图标`<br> | `string` | `''` |
+| iconBtn | `是否是纯按钮图标`<br> | `boolean` | `false` |
+| iconSize | `图标大小`<br> | `union` | `''` |
+| size | `按钮大小"mini" \`<br>` "large" \`<br>` "normal" \`<br>` "small"`<br> | `SizeType` | `'normal' as SizeType` |
+| url | `跳转链接`<br> | `string` | `''` |
+| navigateMode | `跳转方式，同官方`<br> | `navigateModeType` | `'navigateTo'` |
+| disabled | `是否禁用`<br> | `boolean` | `false` |
+| loading | `加载状态`<br> | `boolean` | `false` |
+| height | `高`<br> | `union` | `''` |
+| width | `宽`<br> | `union` | `''` |
+| block | `是否占据整行`<br> | `union` | `false` |
+| formType | `是否作为x-form提交表单用于触发提交表单`<br> | `union` | `'' as 'form'   ''` |
+| lineHeight | `行高`<br> | `union` | `'1'` |
+| fontWeight | `加粗`<br> | `string` | `'normal'` |
+| openType | `开放类型，同官方`<br> | `XButtonLinksOpenType` | `''` |
+| lang | ``<br> | `xButtonLangType` | `'en'` |
+| sessionFrom | ``<br> | `string` | `''` |
+| sendMessageTitle | ``<br> | `string` | `''` |
+| sendMessagePath | ``<br> | `string` | `''` |
+| sendMessageImg | ``<br> | `string` | `''` |
+| appParameter | ``<br> | `string` | `''` |
+| showMessageCard | ``<br> | `boolean` | `false` |
+| phoneNumberNoQuotaToast | ``<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | - |
+| getuserinfo | `-` | - |
+| contact | `-` | - |
+| getphonenumber | `-` | - |
+| getrealtimephonenumber | `-` | - |
+| error | `-` | - |
+| opensetting | `-` | - |
+| launchapp | `-` | - |
+| chooseavatar | `-` | - |
+| chooseaddress | `-` | - |
+| chooseinvoicetitle | `-` | - |
+| addgroupapp | `-` | - |
+| subscribe | `-` | - |
+| login | `-` | - |
+| agreeprivacyauthorization | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/chongyong/button
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #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">按钮 Button</x-text>
+		<x-text class=" text-grey  line-8">样式比原生丰富,主题颜色可以随意的为css合法值以及自己定义的品牌颜色名称，比较随意。</x-text>
+	</x-sheet>
+	<view>
+		<x-sheet>
+			<x-button :block="true" class="mb-12">主色</x-button>
+			<x-button :block="true" class="mb-12" color="error">错误</x-button>
+			<x-button :block="true" class="mb-12" color="warn">警告</x-button>
+			<x-button :block="true" class="mb-12" color="danger">危险</x-button>
+			<x-button :block="true" class="mb-12" color="success">成功</x-button>
+			<x-button darkColor="#222222" :block="true" :shadow="[0,0]" class="mb-12" skin="thin" color="info">次要</x-button>
+
+		</x-sheet>
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">尺寸</x-text>
+		</x-sheet>
+		<x-sheet class=" white round-10 pa-24 mx-24  mb-12 ">
+			<x-button size="mini" class="mb-12">超小</x-button>
+			<x-button size="small" class="mb-12" color="warn">小</x-button>
+			<x-button size="normal" class="mb-12" color="success">正常</x-button>
+			<x-button size="large" class="mb-12" color="danger">大</x-button>
+		</x-sheet>
+
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">样式</x-text>
+		</x-sheet>
+		<x-sheet class=" white round-10 pa-24 mx-24  mb-12 ">
+			<x-button :block="true" class="mb-12" skin="primary">主色</x-button>
+			<x-button :block="true" class="mb-12" skin="thin">浅色按钮</x-button>
+			<x-button :block="true" class="mb-12" :skin="skin" @click="skin = 'primary'">镂空按钮</x-button>
+			<x-button :block="true" class="mb-12" skin="dashed">虚线按钮</x-button>
+			<x-button :block="true" class="mb-12" skin="text">文本按钮</x-button>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">其它样式,图标,尺寸等</x-text>
+		</x-sheet>
+		<x-sheet class=" white round-10 pa-24 mx-24  mb-12 ">
+			<x-button :block="true" icon="thumb-up-fill" class="mb-12" >图标按钮</x-button>
+			<x-button :block="true" icon="verified-badge-line" :disabled="disable" class="mb-12"
+				>禁用</x-button>
+			<x-button :block="true" icon="customer-service-fill" :loading="disable" class="mb-12"
+				>加载中</x-button>
+
+			<view class="flex flex-row flex-row-center-between pb-8">
+				<x-button font-size="20" :iconBtn="true" icon="lock-unlock-fill" round="88" width="88">
+				</x-button>
+				<x-button font-size="20" :iconBtn="true" icon="thumb-up-fill" round="88" width="88"
+					color="naplesyellow">
+				</x-button>
+				<x-button font-size="20" :iconBtn="true" icon="headphone-fill" round="88" width="88"
+					color="majorelleblue">
+				</x-button>
+				<x-button font-size="20" :iconBtn="true" icon="alarm-fill" round="88" width="88" color="venetianred">
+				</x-button>
+
+			</view>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">渐变</x-text>
+			<x-text class=" text-grey ">渐变参考：https://www.designgradients.com/</x-text>
+		</x-sheet>
+		<x-sheet class=" white round-10 pa-24 mx-24  mb-12 ">
+			<x-button :block="true" :border="0" round="88" color="#ff667f"
+				:linearGradient="['left','#ff667f','#fdb247']" class="mb-12" status="primary">渐变</x-button>
+			<x-button :block="true" :border="0" round="88" color="#A531DC"
+				:linearGradient="['left','#A531DC','#4300B1']" class="mb-12" status="primary">渐变</x-button>
+			<x-button :block="true" :border="0" round="88" color="#D02020"
+				:linearGradient="['left','#FF896D','#D02020']" class="mb-12" status="primary">渐变</x-button>
+		</x-sheet>
+
+	</view>
+	<view class="py-32"></view>
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	const disable = ref(true)
+	const skin = ref("outline")
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/270/270/347/224/250/347/273/204/344/273/266//346/226/207/346/234/254 xText.md"

@@ -0,0 +1,132 @@
+# 文本 xText
+
+## 介绍
+
+支持多文本高亮显示，目前uniapp x 4.0.1+正则。
+可允许拓展：比如根据正则高亮电话号码，邮箱等，点击后打电话，发邮件。使用时一定要注意:尽量标签内容写文本,不要用label属性,label属性是用来高亮和正则的
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-text/x-text.uvue
+```
+
+## 使用
+
+```ts
+<x-text></x-text>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| _style | `自定文件标签的样式`<br> | `string` | `""` |
+| _class | `自定文件标签的类,仅对标签插槽内的有效,如果使用label属性会变成richtext渲染,因为类将失效.`<br> | `string` | `""` |
+| label | `源文本，显示 的文本。`<br> | `string` | `""` |
+| highlight | `需要特别高亮的词`<br> | `Array` | `() : string[] => [] as string[]` |
+| highlightReg | `高亮的正则,`<br>`请尽量不要和highlight字段结果集重叠,`<br>`也不要提供的正则数组出现重叠混乱。`<br>`默认是正则电话，邮箱`<br> | `Array` | `() : string[] => [] as string[]` |
+| highlightStyle | `高亮文本的自定义样式`<br> | `string` | `""` |
+| lines | `最多显示几行，默认0不限制。`<br>`超过了此行会出现省略号。`<br>`Vapor对应的是属性maxLines`<br> | `number` | `-1` |
+| selectable | `是否允许复制。`<br> | `boolean` | `false` |
+| color | `文本颜色`<br> | `string` | `""` |
+| darkColor | `暗黑时的文本颜色，如果你不提供，将自动反转。`<br>`自动反转是根据亮度反转，色相不变。`<br> | `string` | `""` |
+| highlightColor | `高亮颜色`<br> | `string` | `"primary"` |
+| lineHeight | `行高`<br> | `union` | `"1.7"` |
+| fontSize | `文字大小。`<br> | `union` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 点击时触发 |
+| item-click | `<br>str: string<br>` | 正则的项目被点击 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认文本插槽，如果使用插槽，那么相关特性功能将会失效。` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/chongyong/text
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #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 ">文本 Text</x-text>
+
+		<x-text>使用时一定要注意:尽量标签内容写文本,不要用label属性,label属性是用来高亮和正则的尽量标签内容写文本,不要用label属性,label属性是用来高亮和尽量标签内容写文本,不要用label属性,label属性是用来高亮和</x-text>
+
+		<x-text class="line-10 " :highlight="['高亮显示','正则','邮箱']"
+			label="支持多文本高亮显示，比如根据正则高亮电话号码，邮箱等，点击后打电话，发邮件。**"></x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class="text-weight-b mb-8">高亮文本,可自定样式</x-text>
+		<x-text>正则电话，邮箱高亮</x-text>
+		<x-text @item-click="testClick" highlightColor="red"
+			:highlightReg="['1[3456789]\\d{9}','[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}','《(.*?)》']"
+			label="邮箱等，点击后打电话:17970689633，发邮件:qq@qq.com。高文本可以被点击触《服务隐私协议》发事件,高亮事件触发目《隐私协议》前uniappx 3.99有bug待官方修复.">
+		</x-text>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">使用插槽功能丢失</x-text>
+		<x-text :lines="2">
+			使用插槽，当作普通text标签使用，高亮功能和后续的拓展将会失效。
+			使用插槽，当作普通text标签使用，高亮功能和后续的拓展将会失效。
+		</x-text>
+	</x-sheet>
+
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+
+	const lines = ref(0)
+	const testClick = (str : string) => {
+		uni.showToast({ title: str, icon: 'none' })
+	}
+</script>
+
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/270/270/347/224/250/347/273/204/344/273/266//346/240/207/347/255/276 xTag.md"

@@ -0,0 +1,148 @@
+# 标签 xTag
+
+## 介绍
+
+标签组件，可用于属性的提醒，显示，强调用。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-tag/x-tag.uvue
+```
+
+## 使用
+
+```ts
+<x-tag></x-tag>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| _class | `额外的 class 名（会追加到组件根节点）`<br> | `string` | `''` |
+| _style | `额外的内联样式字符串`<br> | `string` | `''` |
+| color | `标签主色`<br> | `string` | `''` |
+| bgColor | `背景色（浅色模式）`<br> | `string` | `''` |
+| darkBgColor | `背景色（深色模式）`<br> | `string` | `''` |
+| linearGradient | `线性渐变颜色数组（如 ['to bottom','#00f', '#0ff']）`<br> | `Array` | `():string[] => [] as string[]` |
+| fontColor | `文本颜色`<br> | `string` | `''` |
+| fontSize | `文本字号，例如 '24rpx','24px','24'`<br> | `string` | `''` |
+| round | `圆角半径，默认单位 px`<br> | `number` | `-1` |
+| border | `边框宽度，默认单位 px`<br> | `number` | `1` |
+| borderColor | `边框颜色（浅色模式）`<br> | `string` | `''` |
+| darkBorderColor | `边框颜色（深色模式）`<br> | `string` | `''` |
+| skin | `预设皮肤/风格类型`<br> | `SkinType` | `'default' as SkinType` |
+| icon | `左侧图标名称或资源`<br> | `string` | `''` |
+| size | `组件尺寸（预设枚举）`<br> | `SizeType` | `'normal' as SizeType` |
+| url | `点击后跳转的链接地址`<br> | `string` | `''` |
+| disabled | `是否禁用`<br> | `boolean` | `false` |
+| loading | `是否显示加载状态`<br> | `boolean` | `false` |
+| height | `组件高度，例如 '48rpx','48','48px'`<br> | `string` | `''` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/chongyong/tag
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #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 flex-wrap">
+		<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" >图标</x-tag>
+		<x-tag :border="0" :round="66" :linearGradient="['right','#FF896D','#D02020']" icon="lock-2-line" size="normal"
+			class="mb-12 mr-8" >图标</x-tag>
+		<x-tag :border="0" :round="66" :linearGradient="['right','#00B960','#00552C']" icon="shield-user-line"
+			size="large" class="mb-12 mr-8">图标</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>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)