tmui-cli 2.0.1 → 2.0.3

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//345/215/225/351/200/211/346/214/211/351/222/256/347/273/204 xRadioButton.md"

@@ -0,0 +1,140 @@
+# 单选按钮组 xRadioButton
+
+## 介绍
+
+类似单选导航按钮式或者叫分割选择按钮。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-radio-button/x-radio-button.uvue
+```
+
+## 使用
+
+```ts
+<x-radio-button></x-radio-button>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| list | `数据`<br> | `Array` | `[] as RADIO_BUTTON[]` |
+| modelValue | `当前选中的id值`<br> | `union` | `""` |
+| bgColor | `背景`<br> | `string` | `"#f3f5f8"` |
+| darkBgColor | `暗黑时的背景，如果不提供读取页面暗黑背景`<br> | `string` | `""` |
+| activeColor | `激活的按钮块背景`<br> | `string` | `"white"` |
+| darkActiveColor | `激活的按钮块暗黑背景，如果不提供inputDarkColor`<br> | `string` | `""` |
+| activeFontColor | `激活时的文字颜色,默认取全局主题色。`<br> | `string` | `""` |
+| fontColor | `文字颜色，暗黑时取白色`<br> | `string` | `"#333333"` |
+| fontSize | `文字大小`<br> | `string` | `"16"` |
+| height | `按钮组高度`<br> | `string` | `"40"` |
+| space | `四周内间隙`<br> | `string` | `"2"` |
+| round | `圆角,空值时读取全局配置。`<br> | `string` | `""` |
+| textStyle | `文本样式，可修改文字的样式。`<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `value: union<br>index: number<br>` | 用户点击变换时触发。 |
+| click | `value: union<br>index: number<br>` | 用户点击按钮时触发,不管禁没禁用。 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/radio-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 mb-8">单选按钮 RadioButton</x-text>
+			<x-text  color="#999999" >样式可以随意定制。</x-text>
+		</x-sheet>
+		<x-sheet><x-radio-button text-style="font-weight:bold;" :list="list"></x-radio-button></x-sheet>
+		
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">改变颜色和样式</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-radio-button v-model="active" height="44" round="4" space="2" fontSize="16" bg-color="primary" font-color="#ffffff" active-font-color="primary" :list="list"></x-radio-button>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">为菜单加上图标</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-radio-button round="32" space="1" font-size="12" v-model="active" :list="list2"></x-radio-button>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">当作图标控告选项</x-text>
+		</x-sheet>
+		<x-sheet>
+			<view style="width: 200px;">
+				<x-radio-button  round="6" space="2" font-size="18" v-model="active" :list="list3"></x-radio-button>
+			</view>
+		</x-sheet>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import type { RADIO_BUTTON } from "@/uni_modules/tmx-ui"
+	const active = ref("2")
+	const list = ref<RADIO_BUTTON[]>([
+		{id:"1",title:"苹果"} as RADIO_BUTTON,
+		{id:"2",title:"香蕉"} as RADIO_BUTTON,
+		{id:"3",title:"李子"} as RADIO_BUTTON,
+		{id:"4",title:"蕉子李"} as RADIO_BUTTON,
+	])
+	const list2 = ref<RADIO_BUTTON[]>([
+		{id:"1",title:"系统设置",icon:"settings-4-fill"} as RADIO_BUTTON,
+		{id:"2",title:"打印设置",icon:"printer-fill"} as RADIO_BUTTON,
+		{id:"3",title:"订单管理",icon:"price-tag-2-fill"} as RADIO_BUTTON,
+	])
+	const list3 = ref<RADIO_BUTTON[]>([
+		{id:"1",title:"",icon:"settings-4-fill"} as RADIO_BUTTON,
+		{id:"2",title:"",icon:"printer-fill"} as RADIO_BUTTON,
+		{id:"3",title:"",icon:"price-tag-2-fill"} as RADIO_BUTTON,
+	])	
+</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/257/274/350/210/252/347/273/204/344/273/266//345/256/253/346/240/274 xGrid.md"

@@ -0,0 +1,160 @@
+# 宫格 xGrid
+
+## 介绍
+
+内部只可放置x-grid-item。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-grid/x-grid.uvue
+```
+
+## 使用
+
+```ts
+<x-grid></x-grid>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| col | `显示几列`<br> | `number` | `3` |
+| itemHeight | `项目高度`<br> | `string` | `'70'` |
+| itemBgColor | `统一设置子组件的背景`<br> | `string` | `'white'` |
+| bgColor | `整体宫格的背景`<br> | `string` | `'transparent'` |
+| darkBgColor | `整体宫格的背景暗黑，如果为空，读取全局sheetDark`<br> | `string` | `'transparent'` |
+| width | `整体宽度`<br> | `string` | `'auto'` |
+| iconColor | `图标颜色`<br> | `string` | `'#333333'` |
+| darkIconColor | `暗黑时图标颜色`<br> | `string` | `'#FFFFFF'` |
+| textColor | `文字颜色`<br> | `string` | `'#888888'` |
+| textDarkColor | `文字暗黑颜色`<br> | `string` | `''` |
+| fontSize | `文字大小`<br> | `string` | `'12'` |
+| iconSize | `图标大小`<br> | `string` | `'28'` |
+| showBorder | `是否显示边框。请务必为每个项目配置order`<br> | `boolean` | `true` |
+| borderColor | ``<br> | `string` | `'#f5f5f5'` |
+| borderDarkColor | ``<br> | `string` | `'#2d2d2d'` |
+| round | `圆角`<br> | `string` | `'0'` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `插槽内只可放置x-grid-item` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/grid
+```
+
+## 示例源码
+
+```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">宫格 Grid</x-text>
+		<x-text color="#999999">快速导航布局</x-text>
+	</x-sheet>
+
+	<!-- 测试边线逻辑：4列宫格 -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">4列宫格</x-text>
+		<x-text color="#999999" class="mb-8">注意观察边线显示：第一行无上边线，最左列无左边线，最右列无右边线，最后一行无底边线</x-text>
+		<x-grid :col="4" item-height="88" :show-border="true" round="8" icon-color="primary" dark-icon-color="primary">
+			<x-grid-item :order="0" icon="money-cny-circle-fill" text="项目0"></x-grid-item>
+			<x-grid-item :order="1" icon="shopping-bag-fill" text="项目1"></x-grid-item>
+			<x-grid-item :order="2" icon="price-tag-2-fill" text="项目2"></x-grid-item>
+			<x-grid-item :order="3" icon="wallet-3-fill" text="项目3"></x-grid-item>
+			<x-grid-item :order="4" icon="gift-fill" text="项目4"></x-grid-item>
+			<x-grid-item :order="5" icon="coupon-5-fill" text="项目5"></x-grid-item>
+			<x-grid-item :order="6" icon="shopping-bag-fill" text="项目6"></x-grid-item>
+			<x-grid-item :order="7" icon="money-cny-circle-fill" text="项目7"></x-grid-item>
+			<x-grid-item :order="8" icon="gift-fill" text="项目8"></x-grid-item>
+			<x-grid-item :order="9" icon="coupon-5-fill" text="项目9"></x-grid-item>
+			<x-grid-item :order="10" icon="shopping-bag-fill" text="项目10"></x-grid-item>
+			<x-grid-item :order="11" icon="money-cny-circle-fill" text="项目11"></x-grid-item>
+		</x-grid>
+	</x-sheet>
+
+	<!-- 简单测试：2x2宫格 -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">2x2宫格</x-text>
+		<x-text color="#999999" class="mb-8">2列2行，可以清楚看到边线</x-text>
+		<x-grid :col="2" :show-border="true" icon-color="warning" dark-icon-color="warning">
+			<x-grid-item :order="0" icon="home-fill" text="首页"></x-grid-item>
+			<x-grid-item :order="1" icon="user-fill" text="用户"></x-grid-item>
+			<x-grid-item :order="2" icon="settings-fill" text="设置"></x-grid-item>
+			<x-grid-item :order="3" icon="ancient-gate-fill" text="信息"></x-grid-item>
+		</x-grid>
+	</x-sheet>
+
+	<!-- 3列宫格测试 -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">3列宫格</x-text>
+		<x-text color="#999999" class="mb-8">3列布局的边线显示效果</x-text>
+		<x-grid :col="3" :show-border="true" item-height="90" text-color="#333333">
+			<x-grid-item :order="0" iconColor="danger" icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
+			<x-grid-item :order="1" iconColor="error" icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
+			<x-grid-item :order="2" iconColor="warn" icon="price-tag-2-fill" text="活动日历"></x-grid-item>
+			<x-grid-item :order="3" iconColor="parisviolet" icon="wallet-3-fill" text="领淘金币"></x-grid-item>
+			<x-grid-item :order="4" iconColor="success" icon="gift-fill" text="会员福利"></x-grid-item>
+			<x-grid-item :order="5" iconColor="error" icon="inbox-archive-fill" text="省钱卡"></x-grid-item>
+		</x-grid>
+	</x-sheet>
+
+	<!-- 无边线示例 -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">无边线示例</x-text>
+		<x-grid :col="4" :show-border="false" icon-color="primary" dark-icon-color="primary">
+			<x-grid-item :order="0" icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
+			<x-grid-item :order="1" icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
+			<x-grid-item :order="2" icon="price-tag-2-fill" text="活动日历"></x-grid-item>
+			<x-grid-item :order="3" icon="wallet-3-fill" text="领淘金币"></x-grid-item>
+		</x-grid>
+	</x-sheet>
+	<view style="height:50px"></view>
+
+</template>
+
+<script lang="uts" setup>
+
+</script>
+
+<style>
+
+</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/257/274/350/210/252/347/273/204/344/273/266//345/256/253/346/240/274/345/255/220/347/273/204/344/273/266 xGridItem.md"

@@ -0,0 +1,156 @@
+# 宫格子组件 xGridItem
+
+## 介绍
+
+不可单独使用，请把放它在x-grid标签内。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-grid-item/x-grid-item.uvue
+```
+
+## 使用
+
+```ts
+<x-grid-item></x-grid-item>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| bgColor | `背景，默认为空值，读取父xGrid组件统一设置的背景`<br>`如果这里提供了，以子组件为准。`<br> | `string` | `'transparent'` |
+| order | `项目在列表中的索引,从0开始`<br>`请务必在循环gridItem时提供order为循环的index`<br> | `number` | `-1` |
+| icon | `图标`<br> | `string` | `''` |
+| text | `文字`<br> | `string` | `''` |
+| iconColor | `图标颜色，空值取父xGrid的值`<br> | `string` | `''` |
+| textColor | `文字亮系，空值取父xGrid的值`<br> | `string` | `''` |
+| textDarkColor | `文字暗黑颜色，空值取父xGrid的值`<br> | `string` | `''` |
+| fontSize | `文字大小，空值取父xGrid的值`<br> | `string` | `''` |
+| iconSize | `图标大小，空值取父xGrid的值`<br> | `string` | `''` |
+| isLink | `是否开启链接hover效果`<br> | `boolean` | `true` |
+| url | `url链接地址，如果填写，点击会跳转`<br> | `string` | `''` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 项目点击时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽内容` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/grid
+```
+
+## 示例源码
+
+```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">宫格 Grid</x-text>
+		<x-text color="#999999">快速导航布局</x-text>
+	</x-sheet>
+
+	<!-- 测试边线逻辑：4列宫格 -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">4列宫格</x-text>
+		<x-text color="#999999" class="mb-8">注意观察边线显示：第一行无上边线，最左列无左边线，最右列无右边线，最后一行无底边线</x-text>
+		<x-grid :col="4" item-height="88" :show-border="true" round="8" icon-color="primary" dark-icon-color="primary">
+			<x-grid-item :order="0" icon="money-cny-circle-fill" text="项目0"></x-grid-item>
+			<x-grid-item :order="1" icon="shopping-bag-fill" text="项目1"></x-grid-item>
+			<x-grid-item :order="2" icon="price-tag-2-fill" text="项目2"></x-grid-item>
+			<x-grid-item :order="3" icon="wallet-3-fill" text="项目3"></x-grid-item>
+			<x-grid-item :order="4" icon="gift-fill" text="项目4"></x-grid-item>
+			<x-grid-item :order="5" icon="coupon-5-fill" text="项目5"></x-grid-item>
+			<x-grid-item :order="6" icon="shopping-bag-fill" text="项目6"></x-grid-item>
+			<x-grid-item :order="7" icon="money-cny-circle-fill" text="项目7"></x-grid-item>
+			<x-grid-item :order="8" icon="gift-fill" text="项目8"></x-grid-item>
+			<x-grid-item :order="9" icon="coupon-5-fill" text="项目9"></x-grid-item>
+			<x-grid-item :order="10" icon="shopping-bag-fill" text="项目10"></x-grid-item>
+			<x-grid-item :order="11" icon="money-cny-circle-fill" text="项目11"></x-grid-item>
+		</x-grid>
+	</x-sheet>
+
+	<!-- 简单测试：2x2宫格 -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">2x2宫格</x-text>
+		<x-text color="#999999" class="mb-8">2列2行，可以清楚看到边线</x-text>
+		<x-grid :col="2" :show-border="true" icon-color="warning" dark-icon-color="warning">
+			<x-grid-item :order="0" icon="home-fill" text="首页"></x-grid-item>
+			<x-grid-item :order="1" icon="user-fill" text="用户"></x-grid-item>
+			<x-grid-item :order="2" icon="settings-fill" text="设置"></x-grid-item>
+			<x-grid-item :order="3" icon="ancient-gate-fill" text="信息"></x-grid-item>
+		</x-grid>
+	</x-sheet>
+
+	<!-- 3列宫格测试 -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">3列宫格</x-text>
+		<x-text color="#999999" class="mb-8">3列布局的边线显示效果</x-text>
+		<x-grid :col="3" :show-border="true" item-height="90" text-color="#333333">
+			<x-grid-item :order="0" iconColor="danger" icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
+			<x-grid-item :order="1" iconColor="error" icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
+			<x-grid-item :order="2" iconColor="warn" icon="price-tag-2-fill" text="活动日历"></x-grid-item>
+			<x-grid-item :order="3" iconColor="parisviolet" icon="wallet-3-fill" text="领淘金币"></x-grid-item>
+			<x-grid-item :order="4" iconColor="success" icon="gift-fill" text="会员福利"></x-grid-item>
+			<x-grid-item :order="5" iconColor="error" icon="inbox-archive-fill" text="省钱卡"></x-grid-item>
+		</x-grid>
+	</x-sheet>
+
+	<!-- 无边线示例 -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">无边线示例</x-text>
+		<x-grid :col="4" :show-border="false" icon-color="primary" dark-icon-color="primary">
+			<x-grid-item :order="0" icon="money-cny-circle-fill" text="摇现金"></x-grid-item>
+			<x-grid-item :order="1" icon="shopping-bag-fill" text="百亿补贴"></x-grid-item>
+			<x-grid-item :order="2" icon="price-tag-2-fill" text="活动日历"></x-grid-item>
+			<x-grid-item :order="3" icon="wallet-3-fill" text="领淘金币"></x-grid-item>
+		</x-grid>
+	</x-sheet>
+	<view style="height:50px"></view>
+
+</template>
+
+<script lang="uts" setup>
+
+</script>
+
+<style>
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)