tmui-cli 2.0.1 → 2.0.2

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/272/225/351/203/250/345/257/274/350/210/252 xTabbar.md"

@@ -0,0 +1,299 @@
+# 底部导航 xTabbar
+
+## 介绍
+
+可定义凸起按钮。通过全局状态设置选中项，放于任何页面可自动选中。isCanvasRender 走 x-skia-u 画异形镂空/凸起，五端可用。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-tabbar/x-tabbar.uvue
+```
+
+## 使用
+
+```ts
+<x-tabbar></x-tabbar>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| color | `未选中时的颜色`<br> | `string` | `"#b9b9b9"` |
+| selectedColor | `选中时的颜色，空值取全局主题`<br> | `string` | `""` |
+| bgColor | `背景,如果你为空，会读取全局的亮色tabbar背景`<br> | `string` | `"white"` |
+| darkBgColor | `暗黑时的背景，如果为空，取全局的底部导航背景色。`<br> | `string` | `""` |
+| showTopBorder | `显示顶部边线，暗黑时取全局的borderDarkColor`<br> | `boolean` | `true` |
+| borderColor | `边线颜色`<br> | `string` | `"#f0f0f0"` |
+| fontSize | `文字大小`<br> | `string` | `"10px"` |
+| iconSize | `图标大小`<br> | `string` | `"28px"` |
+| autoTabbarHeight | `导航的整体高度，请使用v-model:autoTabbarHeight="x"`<br>`来获取当前的高度。外部要去变更值。这个只是对外输出，`<br>`给您 外部放在底部占位用，省得你们要一屏时计算高。外部最好computed使用，因为是异步的`<br> | `number` | `0` |
+| outIndex | `需要向外凸起的项目索引。`<br>`-1表示不凸起`<br> | `number` | `2` |
+| outBgColor | `凸起的背景色`<br> | `string` | `"primary"` |
+| outIconColor | `凸起的图标颜色`<br> | `string` | `"white"` |
+| isOutSpace | `是否开启凸起背景镂空（需 isCanvasRender）`<br> | `boolean` | `true` |
+| outReserve | `是否反向凸起：不镂空，在凸起底层绘制背景。false 镂空，true 包住。`<br> | `boolean` | `false` |
+| position | `是否悬浮在底部,不可动态修改`<br>`fixed悬浮，relative静态布局。`<br> | `xTabbarPositionType` | `'fixed'` |
+| linearGradient | `渐变背景，如果提供，上面的背景和暗黑背景将失效。`<br>`仅支持:to bottom,to right,to left,to top`<br>`例：['to right','#ff667f','#ff5416']`<br> | `Array` | `() : string[] => [] as string[]` |
+| list | `如果你提供了本地的list数据，那么全局的list将不会被采用，你需要自己管理激活引，`<br>`跨页面时需要你自己设置当前页面的索引，因为变量索引是无法跨页面的。`<br> | `Array` | `() : TABBAR_ITEM_INFO[] => [] as TABBAR_ITEM_INFO[]` |
+| activeIndex | `当前激活的索引,如果你提供了本地索引，那全局的索引将失效。`<br>`跨页面时需要你自己设置当前页面的索引，因为变量索引是无法跨页面的。`<br>`仅当list不为空时有效。`<br> | `number` | `-1` |
+| zIndex | `层级`<br> | `number` | `20` |
+| firstRenderTimeout | `已废弃。旧官方 canvas 切页不显示时的等待，现已无用。`<br> | `number` | `300` |
+| isCanvasRender | `是否用 x-skia-u 画异形背景（镂空/凸起）。false 则走普通 view，无镂空。`<br> | `boolean` | `true` |
+| bottom | `距离底部的距离（如果开启了这个，下面里面的安全距离将失效，你需要自己计算）`<br>`开启悬浮显示时，如果想要个性化时可以自行配置。填写后顶部边线也会消失不使用（因为已经用这种布局了就不需要上边了，不然不好看。）`<br> | `string` | `''` |
+| width | `组件宽，允许百分比，也建议使用百分比，方便计算两边间隙。`<br>`两边的间隙会通过屏幕宽减去本宽，让导航在屏幕之间居中。`<br> | `string` | `"100%"` |
+| round | `组件圆角。x-skia-u 绘制时也会带上圆角。`<br> | `string` | `"0px"` |
+| backdrop | `是否开启磨砂背景，依赖于插件x-blur-u,并且仅非Canvas下`<br>`同时背景透明需要你自行设置背景色中透明度如:rgba(255,255,255,0.85)`<br> | `boolean` | `false` |
+| itemDisabledHover | `是否开启聚焦选项背景效果`<br> | `boolean` | `true` |
+| itemHoverBg | `选项背景聚焦效果亮系背景`<br> | `string` | `"rgba(200,200,200,0.3)"` |
+| itemHoverDarkBg | `选项背景聚焦效果暗系背景`<br> | `string` | `"rgba(150,150,150,0.2)"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `index: number<br>` | 项目被点击时触发。 |
+| doubleClick | `index: number<br>` | 项目被双击时触发。 |
+| change | `index: number<br>` | 切换项目时触发。 |
+| update:autoTabbarHeight | `height: number<br>` | 同步组件高给外部使用，请使用v-model:autoTabbarHeight<br>组件高度 = 安全栏高度 + 导航栏高度,外部最好computed使用，因为是异步的 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| out | `凸起图标插槽。` | active: boolean<br>active: number<br>size: boolean<br>size: number<br> |
+| item | `子项目插槽，以便完全自定义化样式。` | isactive: number<br>isactive: boolean<br>isactive: number<br>selfindex: number<br>selfindex: boolean<br>selfindex: number<br>children: number<br>children: boolean<br>children: number<br>activeindex: number<br>activeindex: boolean<br>activeindex: number<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/tabbar
+```
+
+## 示例源码
+
+```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 -->
+	<view style="flex:1;display: flex;flex-direction: column;">
+		<scroll-view class="flex-1" direction="vertical">
+			<x-sheet>
+				<x-text font-size="18" class=" text-weight-b mb-8">底部导航 xTabbar</x-text>
+				<x-text  color="#999999" >本组件使用全局来控制选中荐和数据，因此在在各个页面放置本组件后。不需要再赋值当前选中项和数据了。解决以往很多同学不会用的问题。is-canvas-render 为 true 时用 x-skia-u 画异形镂空，五端可用。</x-text>
+			</x-sheet>
+			
+			<x-sheet :margin="['12']">
+				<x-text font-size="18" class=" text-weight-b mb-8">凸起</x-text>
+				<x-text  color="#999999" >使用时-1表示关闭</x-text>
+				<view class="mt-20 flex flex-row">
+					<x-button @click="outIndex=2" class="mr-20">打开凸起</x-button>
+					<x-button @click="outIndex=-1" >关闭凸起</x-button>
+				</view>
+			</x-sheet>
+			<x-sheet :margin="['12']">
+				<x-text font-size="18" class=" text-weight-b">向上凸起</x-text>
+			</x-sheet>
+			<x-tabbar 
+			@change="localChange"
+			:active-index="localIndex"
+			:list="list"
+			:outIndex="outIndex" 
+			:is-canvas-render="true" 
+			:outReserve="true"
+			class="mb-24" 
+			color="rgba(255, 255, 255, 0.5)" 
+			bg-color="#5555ff"
+			out-icon-color="#5555ff"
+			dark-bg-color="#5555ff"
+			out-bg-color="yellow" 
+			selected-color="yellow" 
+			position="relative" >
+			</x-tabbar>
+			<x-tabbar
+			:outIndex="outIndex" 
+			:is-canvas-render="true" 
+			:outReserve="true"
+			class="mb-24" 
+			color="rgba(0,0,0,0.5)"  
+			out-bg-color="#1cd86b" 
+			selected-color="#000000" 
+			:linear-gradient="['to right','#cef85a','#1cd86b']" 
+			position="relative" >
+			</x-tabbar>
+			
+			<x-sheet :margin="['12']">
+				<x-text font-size="18" class=" text-weight-b">向内凹陷</x-text>
+			</x-sheet>
+			<x-tabbar 
+			:outIndex="outIndex" 
+			:is-canvas-render="true" 
+			:outReserve="false"
+			class="mb-24" 
+			color="rgba(255, 255, 255, 0.5)" 
+			bg-color="#5555ff"
+			out-icon-color="#5555ff"
+			dark-bg-color="#5555ff"
+			out-bg-color="yellow" 
+			selected-color="yellow" 
+			position="relative" >
+			</x-tabbar>
+			<x-tabbar
+			:outIndex="outIndex"
+			:is-canvas-render="true" 
+			:outReserve="false"
+			class="mb-24" 
+			color="rgba(0,0,0,0.5)"  
+			out-bg-color="#1cd86b" 
+			selected-color="#000000" 
+			:linear-gradient="['to right','#cef85a','#1cd86b']" 
+			position="relative" >
+			</x-tabbar>
+			
+			<x-sheet :margin="['12']">
+				<x-text font-size="18" class=" text-weight-b">关闭 x-skia-u 绘制</x-text>
+			</x-sheet>
+			
+			<x-tabbar :outIndex="outIndex" :is-canvas-render="false" class="mb-24" color="rgba(0,0,0,0.64)"  out-bg-color="#16ee9c" selected-color="#000000" :linear-gradient="['to right','#20f8be','#1cd86b']" position="relative" >
+			</x-tabbar>
+			<x-tabbar 
+			:itemDisabledHover="false"
+			itemHoverDarkBg="rgba(26, 163, 115, 0.3)"
+			itemHoverBg="rgba(26, 163, 115, 0.3)"
+			:outIndex="-1" :is-canvas-render="false" class="mb-24" 
+			color="rgba(0,0,0,0.64)"  
+			out-bg-color="#16ee9c" 
+			selected-color="#000000" 
+			:linear-gradient="['to right','#20f8be','#1cd86b']" 
+			position="relative" >
+			</x-tabbar>
+			
+			
+			<x-sheet :margin="['12']">
+				<x-text font-size="18" class=" text-weight-b">个性化，关闭isCanvasRender</x-text>
+				<x-text  color="#999999" >非isCanvasRender渲染，没有镂空等异形渲染效果。效果没有开启的好看。请自行选择使用效果。</x-text>
+				<x-button @click="changeList" :block="true">切换局部标签</x-button>
+			</x-sheet>
+			<x-tabbar :isCanvasRender="false"  
+			 :list="list2"
+			 class="mb-24" color="#fff" out-icon-color="#921fff" out-bg-color="#ffffff" selected-color="#ff0" :linear-gradient="['to right','#921fff','#2952ff']" position="relative" >
+			</x-tabbar>
+			<x-sheet :margin="['12']">
+				<x-text font-size="18" class=" text-weight-b mb-8">关于占位问题</x-text>
+				<x-text  color="#999999" >
+					组件通过v-model:autoTabbarHeight="autoTabbarHeight"来对外输入占位高度。
+					例本页面就是通过属性控制占位达到一屏效果，请下拉体验。
+					也要可以通过xStore.xTabbarConfig.tabbarHeight读取
+					当前高：{{tabbaerHeight}}
+				</x-text>
+			</x-sheet>
+			<x-sheet v-for="index in 3" :key="index">
+				<x-text>{{index+1}} / 24向下滑动页面，占位一屏。</x-text>
+			</x-sheet>
+			
+			<!-- 占位 -->
+			<view :style="{height:autoTabbarHeight+'px'}"></view>
+		</scroll-view>
+		<!-- 磨砂放在 scroll-view 外。不要和 x-skia-u 叠在同一个可滚动容器里。 -->
+		<x-tabbar 
+			:itemDisabledHover="false"
+			round="12" 
+			:isCanvasRender="false" 
+			:backdrop="true"
+			bottom="36px"
+			darkBgColor="rgba(0,0,0,0.85)"
+			bgColor="rgba(255,255,255,0.85)"
+			 width="90%" 
+			 :outIndex="outIndex"
+			  v-model:autoTabbarHeight="autoTabbarHeight" 
+			 color="#808080" >
+				<template v-slot:item="{isactive,children,selfindex}">
+					<text v-if="selfindex!=2" :style="{color:(isactive as boolean)?_color:'#808080'}">
+						{{(children as TABBAR_ITEM).title}}
+					</text>
+				</template>
+			</x-tabbar>
+	</view>
+	
+</template>
+
+<script setup lang="ts">
+	import { ref, computed, onBeforeMount } from 'vue'
+	import { TABBAR_ITEM_INFO,NAVIGATE_TYPE,TABBAR_ITEM } from "@/uni_modules/tmx-ui/interface.uts"
+	import { xConfig,xTabbarConfig } from "@/uni_modules/tmx-ui"
+	
+	const autoTabbarHeight = ref(0)
+	const outIndex = ref(2)
+	const localIndex = ref(0)
+	const list = ref<TABBAR_ITEM_INFO[]>([
+		{title:"首页",icon:"home-smile-2-line",selectedIcon:"home-smile-2-fill",dotType:'dot'} as TABBAR_ITEM_INFO,
+		{title:"分类",icon:"drive-line",selectedIcon:"drive-fill"} as TABBAR_ITEM_INFO,
+		{title:"购物车",icon:"shopping-basket-line",selectedIcon:"shopping-basket-fill"} as TABBAR_ITEM_INFO,
+		{title:"统计",icon:"bar-chart-2-line",selectedIcon:"bar-chart-2-fill",dotLabel:'99+',} as TABBAR_ITEM_INFO,
+		{title:"我的",icon:"group-line",selectedIcon:"group-fill"} as TABBAR_ITEM_INFO
+	])
+	// 局部使用
+	const list2 = ref<TABBAR_ITEM_INFO[]>([
+		{title:"首页",icon:"home-smile-2-line",selectedIcon:"home-smile-2-fill",dotType:'dot'} as TABBAR_ITEM_INFO,
+		{title:"分类",icon:"drive-line",selectedIcon:"drive-fill"} as TABBAR_ITEM_INFO,
+		{title:"购物车",icon:"shopping-basket-line",selectedIcon:"shopping-basket-fill"} as TABBAR_ITEM_INFO,
+		{title:"统计",icon:"bar-chart-2-line",selectedIcon:"bar-chart-2-fill",dotLabel:'99+',} as TABBAR_ITEM_INFO,
+		{title:"我的",icon:"group-line",selectedIcon:"group-fill"} as TABBAR_ITEM_INFO
+	])
+	
+	const _color = computed<string>(() => xConfig.color)
+	const tabbaerHeight = computed<number>(() => xTabbarConfig.tabbarHeight)
+	
+	onBeforeMount(() => {
+		// 全局一个时
+		xTabbarConfig.list = list.value
+	})
+	
+	const changeList = () => {
+		list2.value = [
+			{title:"首页",icon:"home-smile-2-line",selectedIcon:"home-smile-2-fill",dotType:'dot'} as TABBAR_ITEM_INFO,
+			{title:"分类",icon:"drive-line",selectedIcon:"drive-fill"} as TABBAR_ITEM_INFO,
+			{title:"我的",icon:"group-line",selectedIcon:"group-fill"} as TABBAR_ITEM_INFO
+		] as TABBAR_ITEM_INFO[]
+	}
+	
+	const changBadge = () => {
+		list.value[3]!.dotLabel = '2'
+	}
+	// 测试本地list，而不是全局。
+	const localChange = (index:number)=>{
+		console.log("local:",index)
+		localIndex.value = index;
+	}
+</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/274/225/345/257/274 xGuid.md"

@@ -0,0 +1,130 @@
+# 引导 xGuid
+
+## 介绍
+
+内部只可放置x-guid-item。在app上根节点必须是scroll-view或者list-view等可滚动的页面使用。
+还要设置容器:scroll-with-animation="false"禁止滚去动画。
+且你的元素唯一id必须是容器的直接子节点，否则会无效(安卓会无效，为了所有平台有效，必须是容器的直接第一级子节点)。
+您可以参考我的dmeo页面使用，严格按照demo使用！！！
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.87+ | 1.1.21 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-guid/x-guid.uvue
+```
+
+## 使用
+
+```ts
+<x-guid></x-guid>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| maskColor | ``<br> | `string` | `'rgba(0,0,0,0.4)'` |
+| activeId | `如果要双向绑定请使用v-model:active-id,您在子组件上定义的target-id属性，且是唯一的`<br> | `string` | `''` |
+| defaultActiveId | ``<br> | `string` | `''` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `-` | 用记点上、下步时的变化 |
+| update:activeId | `-` | 双向同步手动控制，默认可以不配置，如果要自行控制请v-model:activeId |
+| complete | `-` | 点击完成时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `插槽内只可放置x-guid-item` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/guid
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- activeId -->
+	<!-- #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">引导 xGuid {{activeId}}</x-text>
+		<x-text color="#999999">引导组件，需要定位聚焦的元素必须在页面上不可以在子组件中或者隐藏中，并且必须要设定唯一id标识。</x-text>
+	</x-sheet>
+	<view style="height:50px"></view>
+	<view id="testId1" class="mx-16 mb-16 pa-16">
+		<x-text font-size="18" class="text-weight-b mb-8">节点1 testId1</x-text>
+		<view>
+			<x-text color="#999999">testId1</x-text>
+		</view>
+	</view>
+	<view style="height:200px"></view>
+	<view id="testId2" class="mx-16 mb-16 pa-16">
+		<x-text font-size="18" class="text-weight-b mb-8">节点2 testId2</x-text>
+		<view>
+			<x-text color="#999999">testId2</x-text>
+		</view>
+	</view>
+	<view style="height:550px"></view>
+	<x-sheet id="testId3">
+		<x-text font-size="18" class="text-weight-b mb-8">节点3 testId3</x-text>
+		<view>
+			<x-text color="#999999">testId3</x-text>
+		</view>
+	</x-sheet>
+	<view style="height:800px"></view>
+	<view class="mx-16 mb-16 pa-16" id="testId4">
+		<x-text font-size="18" class="text-weight-b mb-8">节点4 testId4</x-text>
+		<view class="flex flex-row flex-row-center-end">
+			<view>
+				<x-text color="#999999">testId4</x-text>
+			</view>
+		</view>
+	</view>
+	<view style="height:200px"></view>
+	<x-guid v-model:activeId="activeId" defaultActiveId="testId1">
+		<x-guid-item v-for="(item,index) in 4" :key="item" :order="index" :targetId="`testId${item}`"
+			:title="`标题${item}`" :content="`testId${item}`"></x-guid-item>
+	</x-guid>
+</template>
+
+<script lang="ts" setup>
+	const activeId = ref('')
+	
+</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/274/225/345/257/274/345/255/220/347/273/204/344/273/266 xGuidItem.md"

@@ -0,0 +1,125 @@
+# 引导子组件 xGuidItem
+
+## 介绍
+
+内部只可放置在x-guid内。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.87+ | 1.1.21 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-guid-item/x-guid-item.uvue
+```
+
+## 使用
+
+```ts
+<x-guid-item></x-guid-item>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| targetId | `必填；唯一标识;且不可以动态变更;可以通过重新渲染变更id;这个是目标元素上的id,`<br>`且是唯一，必须在页面中，不可以封装在子组件内，也不可以隐藏中的元素id，`<br>`必须是明确且可见的元素id`<br> | `string` | `""` |
+| order | `必填；顺序索引，一般循环的index即可。`<br> | `number` | `0` |
+| title | `标题`<br> | `string` | `""` |
+| content | `内容描述`<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| title | `-` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/guid
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- activeId -->
+	<!-- #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">引导 xGuid {{activeId}}</x-text>
+		<x-text color="#999999">引导组件，需要定位聚焦的元素必须在页面上不可以在子组件中或者隐藏中，并且必须要设定唯一id标识。</x-text>
+	</x-sheet>
+	<view style="height:50px"></view>
+	<view id="testId1" class="mx-16 mb-16 pa-16">
+		<x-text font-size="18" class="text-weight-b mb-8">节点1 testId1</x-text>
+		<view>
+			<x-text color="#999999">testId1</x-text>
+		</view>
+	</view>
+	<view style="height:200px"></view>
+	<view id="testId2" class="mx-16 mb-16 pa-16">
+		<x-text font-size="18" class="text-weight-b mb-8">节点2 testId2</x-text>
+		<view>
+			<x-text color="#999999">testId2</x-text>
+		</view>
+	</view>
+	<view style="height:550px"></view>
+	<x-sheet id="testId3">
+		<x-text font-size="18" class="text-weight-b mb-8">节点3 testId3</x-text>
+		<view>
+			<x-text color="#999999">testId3</x-text>
+		</view>
+	</x-sheet>
+	<view style="height:800px"></view>
+	<view class="mx-16 mb-16 pa-16" id="testId4">
+		<x-text font-size="18" class="text-weight-b mb-8">节点4 testId4</x-text>
+		<view class="flex flex-row flex-row-center-end">
+			<view>
+				<x-text color="#999999">testId4</x-text>
+			</view>
+		</view>
+	</view>
+	<view style="height:200px"></view>
+	<x-guid v-model:activeId="activeId" defaultActiveId="testId1">
+		<x-guid-item v-for="(item,index) in 4" :key="item" :order="index" :targetId="`testId${item}`"
+			:title="`标题${item}`" :content="`testId${item}`"></x-guid-item>
+	</x-guid>
+</template>
+
+<script lang="ts" setup>
+	const activeId = ref('')
+	
+</script>
+
+<style lang="scss">
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)