tmui-cli 2.0.1 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//351/223/276/346/216/245 xLink.md"

@@ -0,0 +1,113 @@
+# 链接 xLink
+
+## 介绍
+
+链接可以打开指定的页面,也可以打开外链(打开外链依赖于x-startintent-s插件,加密用户请联系发你源码自行源码编译)
+微信小程序无法打开外链,微信小程序正式版本pc版本可以打开外链,真机手机仅可打开应用内页面.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-link/x-link.uvue
+```
+
+## 使用
+
+```ts
+<x-link></x-link>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| href | `需要打开的链接,可以是页面地址也可以是网页链接地址.`<br> | `string` | `""` |
+| color | `空值时取全局主题`<br> | `string` | `""` |
+| fontSize | `字号,rpx,px,单位均可`<br> | `string` | `"15"` |
+| line | `是否需要下划线`<br> | `boolean` | `false` |
+| openType | `打开方式,如果是网页链接将启动新的窗口打开.`<br> | `NAVIGATE_TYPE` | `"navigate"` |
+| prefix | `前缀图标名称`<br> | `string` | `"links-line"` |
+| suffix | `后缀图标名称`<br> | `string` | `""` |
+| _style | ``<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 点击事件 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽，仅可放置文本` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/link
+```
+
+## 示例源码
+
+```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">链接 xLink</x-text>
+			<x-text color="#999999" >
+				链接可以打开指定的页面,也可以打开外链(打开外链依赖于x-startintent-s插件,加密用户请联系发你源码自行源码编译)
+			</x-text>
+		</x-sheet>
+		
+		<x-sheet>
+			<x-link href="/pages/index/button">打开应用内页面</x-link>
+		</x-sheet>
+		<x-sheet>
+			<x-link href="https://tmui.design">打开外部链接</x-link>
+		</x-sheet>
+		<x-sheet>
+			<x-link href="/pages/index/button" prefix='' :line="true">下划线</x-link>
+		</x-sheet>
+		<x-sheet>
+			<x-link href="/pages/index/button" prefix='' suffix="share-circle-line">后缀图标</x-link>
+		</x-sheet>
+		<x-sheet>
+			<x-link color="success" font-size="21" href="/pages/index/button" prefix='' suffix="share-circle-line">颜色及字号</x-link>
+		</x-sheet>
+</template>
+
+<script 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/261/225/347/244/272/347/273/204/344/273/266//351/252/250/346/236/266/345/261/217 xSkeleton.md"

@@ -0,0 +1,119 @@
+# 骨架屏 xSkeleton
+
+## 介绍
+
+样式灵活多变。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-skeleton/x-skeleton.uvue
+```
+
+## 使用
+
+```ts
+<x-skeleton></x-skeleton>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| height | `高，单位允许%，auto,'数字',rpx,px`<br> | `string` | `'12'` |
+| width | `宽，单位允许%，auto,'数字',rpx,px`<br> | `string` | `'auto'` |
+| color | `背景颜色`<br> | `string` | `'#e4e4e4'` |
+| darkColor | `暗黑背景颜色`<br> | `string` | `'#323232'` |
+| round | `圆角`<br> | `string` | `'3'` |
+| duration | `动画间隔`<br> | `string` | `'900ms'` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/skeleton
+```
+
+## 示例源码
+
+```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">骨架屏 xSkeleton</x-text>
+			<x-text color="#999999">骨架屏就是一个单view，允许你自由组合骨架效果，建议单独使用本组件自己封装一个想要的骨架效果。</x-text>
+			<x-text color="#999999">由于每个人的app占位样式不一样，我认为这种非常自由式的组合非常符合扩展。</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-skeleton></x-skeleton>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class="text-weight-b ">动手组合一个骨架</x-text>
+		</x-sheet>
+		<x-sheet>
+			<view class="flex flex-row">
+				<x-skeleton width="50" height="50" round="50"></x-skeleton>
+				<view class="flex-1 ml-8">
+					<x-skeleton class="mb-8" v-for="item in 6" :key="item"></x-skeleton>
+				</view>
+			</view>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class="text-weight-b ">再组合一个吧</x-text>
+		</x-sheet>
+		<x-sheet>
+			<view class="flex flex-row flex-row-center-between">
+				<view v-for="item1 in 3" :key="item1" style="width:30%">
+					<x-skeleton height="50"></x-skeleton>
+					<view class="mt-8">
+						<x-skeleton height="10" class="mb-8" v-for="item in 3" :key="item"></x-skeleton>
+					</view>
+				</view>
+			</view>
+		</x-sheet>
+		<view style="height:50px"></view>
+
+</template>
+
+<script setup lang="ts">
+
+</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/270/270/347/224/250/347/273/204/344/273/266//345/233/276/346/240/207 xIcon.md"

@@ -0,0 +1,135 @@
+# 图标 xIcon
+
+## 介绍
+
+图标使用的是开源图标:[https://remixicon.com/](https://remixicon.com/)，版本是：4.5.0 ，使用时，不用带ri-前缀。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-icon/x-icon.uvue
+```
+
+## 使用
+
+```ts
+<x-icon></x-icon>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| name | `图标名称，不带ri-前缀（不推荐在app上使用这个属性,建议使用code显示,性能明显更快）`<br>`也可以是本地或者远程图片`<br> | `string` | `"home-3-fill"` |
+| fontSize | `图标大小,单位任意,比如"12",12px,12rpx`<br> | `union` | `"16"` |
+| fontFamily | `自定义图标字体，前提是`<br>`你要在appuvue中已经安装好字体文件，`<br>`否则无法使用。`<br>`要让自定图标生效你需要配合code属性一起使用`<br> | `string` | `"remixicon"` |
+| code | `图标的16进制字符串，注意不含u`<br>`比如：ea0c，ea14这种，`<br>`如果你提供了code优化解析这，那么name将失效，如果你是纯字体图标使用`<br>`你可以使用这个属性，可以提供性能和自己定义的图标会比较方便。`<br> | `string` | `""` |
+| color | `图标颜色`<br> | `string` | `"black"` |
+| darkColor | `暗黑时的文本颜色，如果你不提供，将自动反转。`<br>`自动反转是根据亮度反转，色相不变。`<br> | `string` | `""` |
+| spin | `是否旋转动画`<br> | `boolean` | `false` |
+| rotation | `旋转角度`<br> | `number` | `0` |
+| duration | `动画时间`<br> | `number` | `1500` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/chongyong/icon
+```
+
+## 示例源码
+
+```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">图标 Icon</x-text>
+			<x-text color="#999999" class="line-8">使用开源图标remixicon：https://remixicon.com/</x-text>
+			<x-text color="error" class="line-8">name:只要名称就行，不要ri-前缀，比如router-line</x-text>
+		</x-sheet>
+		<x-sheet class="flex flex-row flex-row-center-between">
+			<x-icon name="chat-3-line"></x-icon>
+			<x-icon name="chat-3-fill"></x-icon>
+			<x-icon name="contrast-drop-2-fill"></x-icon>
+			<x-icon name="circle-line"></x-icon>
+			<x-icon name="smartphone-line"></x-icon>
+			<x-icon name="git-repository-private-fill"></x-icon>
+			<x-icon name="mouse-fill"></x-icon>
+		</x-sheet>
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">旋转 Rotation</x-text>
+		</x-sheet>
+		<x-sheet class="flex flex-row flex-row-center-start">
+			<x-icon color="primary" font-size="32" name="arrow-up-line"></x-icon>
+			<x-icon color="primary" :rotation="90" font-size="32" name="arrow-up-line"></x-icon>
+			<x-icon color="primary" :rotation="180" font-size="32" name="arrow-up-line"></x-icon>
+			<x-icon color="primary" :rotation="270" font-size="32" name="arrow-up-line"></x-icon>
+
+		</x-sheet>
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">颜色 color</x-text>
+			<x-text color="#999999" class="  ">更多属性见文档</x-text>
+		</x-sheet>
+		<x-sheet class="flex flex-row flex-row-center-between">
+			<x-icon color="red" font-size="32" name="information-line"></x-icon>
+			<x-icon color="primary" font-size="32" name="gps-line"></x-icon>
+			<x-icon color="orange" font-size="32" name="headphone-line"></x-icon>
+			<x-icon color="tea" font-size="32" name="rocket-fill"></x-icon>
+			<x-icon color="green" font-size="32" name="mic-2-line"></x-icon>
+			<x-icon color="blue" font-size="32" name="image-circle-line"></x-icon>
+			<x-icon color="moccasin" font-size="32" name="plane-line"></x-icon>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">动画 Spin</x-text>
+		</x-sheet>
+		<x-sheet >
+			<x-icon :spin="true" font-size="64" color="red" name="loader-line" ></x-icon>
+		</x-sheet>
+
+		<view class="py-32"></view>
+
+</template>
+
+
+<script setup lang="ts">
+	
+</script>
+```
+
+---
+
+## 版权
+
+@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//345/256/271/345/231/250 xSheet.md"

@@ -0,0 +1,133 @@
+# 容器 xSheet
+
+## 介绍
+
+可方便快速的更改属性以塑造符合你的设计风格。背景，圆角，间隙等统一风格可全局配置。
+主要是用来统一页面风格，间距等可统一设置，提高设计的一致性。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-sheet/x-sheet.uvue
+```
+
+## 使用
+
+```ts
+<x-sheet></x-sheet>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| color | `主题背景`<br> | `string` | `'white'` |
+| darkColor | `暗黑时的主题背景，空值取全局`<br> | `string` | `''` |
+| followTheme | `是否让背景色跟随主题，默认是白色，不跟随。`<br> | `boolean` | `false` |
+| hoverColor | `按下时的焦点色`<br> | `string` | `''` |
+| url | `页面地址，提供时，点击可导航到该页面`<br> | `string` | `''` |
+| linearGradient | `渐变背景，提供时前面的color,dakColor将失效，格式为数组3长度[方向，颜色1，颜色2]`<br> | `tuple` | `[] as string[]` |
+| round | `圆角空值取全局[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组`<br> | `union` | `''` |
+| border | `边大小[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组`<br> | `union` | `''` |
+| shadow | `投影[x,y,大小,颜色(可选，不提供第4个使用背景色或者从渐变色中取值)]`<br> | `Array` | `():Array<string number> => ([] as string[])` |
+| borderColor | `边颜色[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string 自动转为 [string]`<br> | `union` | `():string[] => ([] as string[])` |
+| darkBorderColor | `暗黑时边颜色[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string 自动转为 [string]`<br> | `union` | `():string[] => ([] as string[])` |
+| borderStyle | `边类型[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string 自动转为 [string]`<br> | `union` | `'solid'` |
+| margin | `外边距[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组`<br> | `union` | `''` |
+| padding | `内边距[全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组`<br> | `union` | `''` |
+| isLink | `是否为链接类型，是的话有点按效果`<br> | `boolean` | `false` |
+| loading | `是否让内容处于加载状态`<br> | `boolean` | `false` |
+| height | `高：rpx,px,%，数字等都行`<br> | `union` | `'auto'` |
+| width | `宽：rpx,px,%，数字等都行`<br> | `union` | `'auto'` |
+| hoverClass | ``<br> | `string` | `''` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/chongyong/sheet
+```
+
+## 示例源码
+
+```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">容器 Sheet</x-text>
+		<x-text color="#999999"
+			class="line-8">属性比较多，可快速的用来布局，减轻你的布局压力，让效率提升。实验证明：一个普通的小程序20个页面。使用容器+我的组件布局。2天内完成布局，2天对接完成后端。</x-text>
+		<x-text color="error" class="line-8">并且背景，圆角，间隙允许全局动态/统一配置，布局后的页面可根据后期设计要求，一键修改所有设计风格。绝对布局利器。</x-text>
+	</x-sheet>
+	<x-sheet :round="['12','2']" color="primary">
+		<x-text color="white">更改圆角</x-text>
+	</x-sheet>
+	<x-sheet :round="['12','2']" :border="['2','2']" :border-color="['red','primary']">
+		<x-text font-size="18" class=" text-weight-b">边线</x-text>
+	</x-sheet>
+
+	<x-sheet :round="['12','2']" :linearGradient="['left','#ff667f','#fdb247']">
+		<x-text color="white">渐变</x-text>
+	</x-sheet>
+
+	<x-sheet :loading="true">
+		<x-text font-size="18" class=" text-weight-b mb-24">还允许让内容处于加载中</x-text>
+		<x-sheet :margin="['0']" :linearGradient="['left','#ff667f','#fdb247']">
+			<x-text color="white">渐变</x-text>
+		</x-sheet>
+		<x-sheet :margin="['0','12','0','0']" color="primary">
+			<x-text color="white" class=" text-weight-b ">更改圆角</x-text>
+		</x-sheet>
+	</x-sheet>
+
+	<view style="height: 50px;"></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//345/270/203/345/261/200 xRow.md"

@@ -0,0 +1,181 @@
+# 布局 xRow
+
+## 介绍
+
+内部标签只可旋转x-col子组件。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-row/x-row.uvue
+```
+
+## 使用
+
+```ts
+<x-row></x-row>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| col | `默认12列数`<br> | `union` | `12` |
+| justify | `默认start，子元素左右对齐排列`<br> | `union` | `"start"` |
+| align | `默认flex-start，子元素上下对齐排列`<br> | `union` | `"flex-start"` |
+| wrap | `是否自动断行`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `只可放置x-col子组件。` | - |
+
+
+## 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)