================
CODE SNIPPETS
================
TITLE: Example Script Setup for xWeekbar (Vue)
DESCRIPTION: The <script setup> block for the example page, which is currently empty. This indicates that the component's reactive data, methods, and logic are either not required for this specific demonstration or are handled implicitly by the framework or parent components.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/weekbar.md#_snippet_2

LANGUAGE: JavaScript
CODE:
```
<script setup>

</script>
```

--------------------------------

TITLE: Script for UNIAPP Badge Example Page
DESCRIPTION: Provides the minimal JavaScript script block required for the UNIAPP example page component. It defines the component's reactive data properties and includes the standard `onLoad` lifecycle hook, although no badge-specific logic is implemented in this basic example.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/badge.md#_snippet_1

LANGUAGE: JavaScript
CODE:
```
<script>
	export default {
		data() {
			return {
				
			};
		},
		onLoad(){
		}
	}
</script>
```

--------------------------------

TITLE: Example x-mention Logic Script (UTS)
DESCRIPTION: Provides the UTS script logic (`script setup`) for the example template. It uses Vue 3 Composition API features (`ref`, `computed`) to manage UI state (drawer visibility, input value, mention list, chat messages) and component references. It defines event handlers (`onmention`, `cellClick`, `beforeRemove`, `removemention`, `onconfirm`) to interact with the `x-mention` component and simulate a mention selection workflow.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/mention.md#_snippet_2

LANGUAGE: UTS
CODE:
```
import { ref } from "vue"
	type PENGYOU_TYPE = {
		name : string,
		id : string
	}
	const show = ref<boolean>(false)
	const keyword = ref("")
	const mention = ref<XMentionComponentPublicInstance | null>(null)
	const pengyouList = ref<PENGYOU_TYPE[]>([])
	const pengyouListNames = computed(():string[] => pengyouList.value.map((el:PENGYOU_TYPE):string=> ('@'+el.name)))
	const chat = ref<string[]>([])
	const tags = ref<string[]>([])

	// 添加虚拟数据
	for (let i = 0; i < 10; i++) {
		pengyouList.value.push({
			name: "朋友" + i,
			id: i.toString()
		} as PENGYOU_TYPE)
	}

	const onmention = () => {

		show.value = true;
	}
	const cellClick = (str : string) => {
		if(mention.value==null) return;
		keyword.value += str + ' '
		show.value = false;
		mention.value!.setFoucus(true)
		tags.value.push(str)
	}
	//删除前需要校验当前删除的标签是不是朋友标签,因为如果用户把光标移动有名称内删除,打乱了标签,其实已经不构成是标签了,就不需要删除了.
	const beforeRemove = (tag : string) : boolean => {
		let index = pengyouList.value.findIndex((el : PENGYOU_TYPE) : boolean => el.name == tag)
		console.log("即将删除标签:", tag, index > 1 ? '是' : '否')
		return index > -1
	}
	const removemention = (tag : string) => {
		console.log("被删除标签:", tag)
	}
	const onconfirm = (nowval:string)=>{
		chat.value.push(nowval)
		keyword.value = ''
	}

```

--------------------------------

TITLE: Example Page Script (JavaScript)
DESCRIPTION: This JavaScript snippet provides the script logic for the example page. It defines a 'showModal' data property to control the visibility state of the x-action-modal and sets it to 'true' in the 'onReady' lifecycle hook, causing the modal to display when the page is ready.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/action-modal.md#_snippet_2

LANGUAGE: JavaScript
CODE:
```
<script>
	export default {
		data() {
			return {
				showModal: false
			};
		},
		onReady() {
			this.showModal = true;
		}
	}
</script>
```

--------------------------------

TITLE: Example Implementation Template HTML
DESCRIPTION: Full template code for an example page demonstrating various uses of x-dropdown-menu. It includes using v-model for control, nesting x-dropdown-item components with custom content, handling different positioning modes (fixed and static), and conditional rendering directives for platform compatibility.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/dropdown-menu.md#_snippet_1

LANGUAGE: HTML
CODE:
```
<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">下拉菜单 dropdownMenu</x-text>
			<x-text color="#999999" >
				提供static和fiexd两种位置方式。内容完全通过插槽自由布局。x-dropdown-menu 中的render="true"后动画会消失
			</x-text>
		</x-sheet>
		<x-dropdown-menu @change="onchange" v-model="activeIndex">
			<x-dropdown-item  title="按销量" key-name="xiaoliang">
				<x-text class="mb-32">因自由度非常高，你可以自由布局最大高度是否滚动内容。</x-text>
				<!-- -1表示关闭 -->
				<x-button @click="activeIndex=-1" :block="true">关闭</x-button>
			</x-dropdown-item>
			<x-dropdown-item :title="menus" key-name="wiff">
				<x-text>自己添加scrollview等实现页脚功能.</x-text>
			</x-dropdown-item>
			<x-dropdown-item title="硬盘容量" key-name="yingpan">
				<x-text>内容层的高度是自动高。不需要额外设置。</x-text>
			</x-dropdown-item>
			<x-dropdown-item title="综合" key-name="zhonghe" :isBtn="true" icon="sort-desc" active-icon="sort-asc">
				<x-text>内容层的高度是自动高。不需要额外设置。</x-text>
			</x-dropdown-item>
		</x-dropdown-menu>


		<x-sheet :margin="['0','24']">
			<x-text font-size="18" class=" text-weight-b ">正文是静态，弹出时，菜单不会置顶在页面顶部。</x-text>
		</x-sheet>

		<x-dropdown-menu position="static">
			<x-dropdown-item title="按距离">
				<x-text>这里由用户自由布局内容，实现逻辑。</x-text>
			</x-dropdown-item>
			<x-dropdown-item title="综合条件">
				<x-text>你还可以实现更多更复杂的功能.</x-text>
			</x-dropdown-item>
			<x-dropdown-item title="所有项目">
				<x-text>完全插槽实现灵活度极高。</x-text>
			</x-dropdown-item>
		</x-dropdown-menu>

	<view style="height:580px"></view>

	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
```

--------------------------------

TITLE: Script Logic for x-indexbar Example Page JS/UTS
DESCRIPTION: Contains the script logic for the example page using the x-indexbar component. It imports sample data and a store, initializes component data, and defines a computed property to check the current theme mode using the xStore.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/indexbar.md#_snippet_2

LANGUAGE: JavaScript
CODE:
```
<script>
	// 示例参数数据,请vip用户到demo中下载查询数据样例.
	import {dataslist} from "./indexdata.uts"
	import { xStore } from "@/uni_modules/tmx-ui/index.uts";
	
	export default {
		data() {
			return {
				list:dataslist as UTSJSONObject[]
			};
		},
		computed:{
			isDark:():boolean=>xStore.xConfig.dark=='dark'
		},
		onLoad() {
			
		},
		methods:{
			
		}
	}
</script>
```

--------------------------------

TITLE: Styling tmui4 TextCloud Example Page (SCSS)
DESCRIPTION: Provides an empty style block for the example page using SCSS. It currently contains no specific styles but serves as a placeholder for adding component or page-level styling.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/text-cloud.md#_snippet_3

LANGUAGE: SCSS
CODE:
```
<style lang="scss">

</style>
```

--------------------------------

TITLE: Example Usage of x-icon Component - HTML
DESCRIPTION: Comprehensive example demonstrating the `x-icon` component's features in a Uni-app template, including setting icons by `name`, rotating icons with the `rotation` prop, changing color with the `color` prop, and applying a spin animation with the `spin` prop. Includes conditional rendering for different platforms.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/icon.md#_snippet_1

LANGUAGE: html
CODE:
```
<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">图标 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-4-fill" ></x-icon>
		</x-sheet>

		<view class="py-32"></view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
```

--------------------------------

TITLE: Example Page Styles (SCSS)
DESCRIPTION: This is the style block for the example page using SCSS. The block is currently empty, indicating that no specific styles are defined or applied within this section for the page or its components.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/action-modal.md#_snippet_3

LANGUAGE: SCSS
CODE:
```
<style lang="scss">

</style>
```

--------------------------------

TITLE: Example Logic Script JavaScript
DESCRIPTION: JavaScript code providing the data and methods for the example page template. It manages the active state of the dropdown menu using the `activeIndex` data property and defines an `onchange` method to handle the dropdown's change event, logging the selected index, key name, and status.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/dropdown-menu.md#_snippet_2

LANGUAGE: JavaScript
CODE:
```
<script>
	export default {
		data() {
			return {
				activeIndex: -1,
				remove: true,
				menus:"网络类型"
			};
		},
		onLoad() {
		
		},
		methods: {
			onchange(index : number, keyName : string, status : boolean) {
				console.log('当前索引：', index, ';当前项目标识：', keyName, ';当前开关状态：', status)
			}
		},
	}
</script>
```

--------------------------------

TITLE: Example Styles for xCountdown Page (SCSS)
DESCRIPTION: The style section for the example UNIAPP page using the `x-countdown` component. It specifies the language as SCSS but contains no actual styles, indicating that styling relies on default component styles, inline styles, or styles defined elsewhere.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/countdown.md#_snippet_3

LANGUAGE: SCSS
CODE:
```
<style lang="scss">

</style>
```

--------------------------------

TITLE: Component Script Structure - UTS
DESCRIPTION: The script section for the Uni-app page example, defining the component's data and methods placeholders. Written in UTS, it provides the basic structure but doesn't contain specific logic directly related to the `x-icon` component's props or events in this minimal example.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/icon.md#_snippet_2

LANGUAGE: uts
CODE:
```
<script lang="uts">
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>
```

--------------------------------

TITLE: Example Page Script with TMUI4 Javascript
DESCRIPTION: This is the basic script block for the example page using the x-rate component. It exports a default Vue component object with an empty data function, serving as a minimal setup for the page.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/rate.md#_snippet_1

LANGUAGE: javascript
CODE:
```
<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>
```

--------------------------------

TITLE: Example Usage of x-sign-board Component - Template
DESCRIPTION: This snippet shows how to integrate the x-sign-board component into a Vue template. It includes examples of setting its height and binding its ref, as well as demonstrating interaction buttons (Save, Check, Clear) and usage within a modal. It also shows how to display the saved image.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/sign-board.md#_snippet_0

LANGUAGE: template
CODE:
```
<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 >
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">签名板 SignBoard</x-text>
			<x-text color="#999999" >
				提供高性能流畅性的原生绘制
			</x-text>
		</x-sheet>
		<x-sheet dark-color="#333">
			<x-sign-board height="200" ref="boardRef" :stroke-color="color" ></x-sign-board>
		</x-sheet>
		
		
		<x-sheet class="flex flex-row">
			<x-button width="31%"  @click="saveImg">保存图片</x-button>
			<x-button width="31%"  class="mx-10"  @click="checkCount">是否签名</x-button>
			<x-button width="31%" color="error" @click="clear">清除</x-button>
		</x-sheet>
		
		<x-sheet dark-color="#333">
			<x-text font-size="18" class=" text-weight-b mb-8">演示在弹层内</x-text>
			<x-modal @open="opended" @close="show=false" height="350">
				<template v-slot:trigger>
					<x-button :block="true" >打开</x-button>
				</template>
				<x-text v-if="!show">加载中</x-text>
				<x-sign-board v-if="show" height="200" ref="boardRef" :stroke-width="3" :stroke-color="color" ></x-sign-board>
			</x-modal>
		</x-sheet>

		
		<x-sheet>
			<x-text font-size="18" class=" text-weight-b mb-8">点击上方保存图片预览</x-text>
			<image :style="{width:width+'px',height:height+'px'}" :src="img"></image>
		</x-sheet>
	</view>
</template>
```

--------------------------------

TITLE: Rendering tmui4 TextCloud Example Page (Vue Template)
DESCRIPTION: Provides a complete template structure for an example page demonstrating the `x-text-cloud` component. It includes conditional rendering for `APP` and `MP-WEIXIN` platforms, basic layout components (`x-sheet`, `x-text`), and two instances of `x-text-cloud` using different data lists (`list` and `list2`).

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/text-cloud.md#_snippet_1

LANGUAGE: HTML
CODE:
```
<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">词云 TtextCloud</x-text>
			<x-text color="#999999" >把文字集中一起随机绘制，权重高的会突显变大，并居中显示。</x-text>
		</x-sheet>
		<x-sheet>
			<x-text-cloud :list="list"></x-text-cloud>
		</x-sheet>
		<x-sheet>
			<x-text-cloud :list="list2"></x-text-cloud>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
```

--------------------------------

TITLE: Example Style Block SCSS
DESCRIPTION: An empty style block placeholder for component-specific styles, configured to use SCSS. In this particular example, no custom styles are defined within the block.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/msg-notice.md#_snippet_3

LANGUAGE: SCSS
CODE:
```
<style lang="scss">

</style>
```

--------------------------------

TITLE: Example x-mention Usage Template (UTS/UNIAPP)
DESCRIPTION: Provides a full UNIAPP template example demonstrating the use of the `x-mention` component. It includes conditional compilation for different platforms, basic layout components (`x-sheet`, `x-text`), iteration (`v-for`), data binding (`v-model`), event handling (`@confirm`, `@mention`, `@beforeRemove`, `@removemention`), referencing the component (`ref`), and integrating with a selection drawer (`x-drawer`) for mentioning users.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/mention.md#_snippet_1

LANGUAGE: html
CODE:
```
<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">提及 xMention</x-text>
			<x-text color="#999999">此组件的输入体验与微信基本相符,体验比较完善它不与选择视图绑定,通过事件控制将会完美的支持自定界面.</x-text>
		</x-sheet>
	
		<x-sheet v-for="(item,index) in chat" :key="index" >
			<x-text :label="item" :height-light="pengyouListNames" height-light-color="red" ></x-text>
		</x-sheet>
		<x-sheet>
			
			<x-mention dark-bg-color="#333" 
			style="border-radius: 6px;"
			@confirm="onconfirm" ref="mention" @mention="onmention" :beforeRemove="beforeRemove" @removemention="removemention"
				v-model="(keyword as string)"></x-mention>
				
			<x-text class="mt-n8 opacity-5" font-size="12" color="#999999">可以像微信一样选择朋友并在编辑朋友删除字符让之前选择的失效.然后继续选择,会在删除前和删除后通过事件通知.</x-text>
		</x-sheet>

		<x-drawer :showClose="true" :show-footer="false" title="请选择朋友" v-model:show="(show as boolean)" size="500px">
			<view>
				<x-cell @click="cellClick(item.name)" v-for="(item,index) in pengyouList" :card="false" :key="index"
					:title="item.name" :bottom-border-insert="false"></x-cell>
			</view>
		</x-drawer>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
```

--------------------------------

TITLE: Example Markdown Input String
DESCRIPTION: This string represents the markdown content assigned to the `str` data property, including headers, bold text, tables, and fenced code blocks (CSS, Javascript) to be rendered by the x-markdown component.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/markdown.md#_snippet_3

LANGUAGE: Markdown
CODE:
```
# 全局配置
## 介绍

本配置参数会影响整个app风格，请慎重配置，或者根据你的UI/UX设计师指示配置

**可以在任意位置导入并设置，立即生效，全局响应**\n**堙**

| This header    | spans two | Header A |
|-------------|------------|----------|
| Cell A      | Cell B     | Cell C   |
| Cell A      | Cell B     | Cell C   |
| Cell A      | Cell B     | Cell C   |

## CSS代码
\`\`\`css
<uni-view data-v-361a5606="" class="xSheet" 
style="background-color: rgb(255, 255, 255); 
width: auto; height: auto; border-radius: 14px; border-width: 0px; 
border-color: transparent; margin: 0px 14px 14px; padding: 14px; box-shadow: none; border-style: solid;">
<--!>输入内容<!-->
<\/uni-view>

\`\`\`

\`\`\`css
const highlight = "code";
\`\`\`



```

--------------------------------

TITLE: Basic xTree Component Usage - HTML
DESCRIPTION: Demonstrates the simplest way to use the x-tree component by including its tag in a template. This basic example shows the component inclusion without any specific props or event bindings.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/tree.md#_snippet_0

LANGUAGE: HTML
CODE:
```
<x-tree></x-tree>
```

--------------------------------

TITLE: Page Styling SCSS
DESCRIPTION: Provides a block for defining page-specific styles using SCSS syntax. This particular snippet is empty, indicating that no custom styles are applied in this example. Requires an SCSS compiler or preprocessor setup.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/watermark.md#_snippet_3

LANGUAGE: SCSS
CODE:
```
<style lang="scss">

</style>
```

--------------------------------

TITLE: Example Style Block for xWeekbar (Vue)
DESCRIPTION: The <style> block for the example page, which is currently empty. This suggests that no specific CSS rules are defined directly within this component example, relying instead on global styles, inline styles, or component props for visual presentation.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/weekbar.md#_snippet_3

LANGUAGE: CSS
CODE:
```
<style>

</style>
```

--------------------------------

TITLE: Using xBetweenTime Component with Data Binding - Vue/uni-app
DESCRIPTION: This code snippet demonstrates how to integrate and use the xBetweenTime component within a Vue/uni-app template. It shows binding the selected date range using `v-model` to the `newdata` variable and the formatted output string using `v-model:model-str` to the `nowVal` variable. It also sets explicit start and end dates and includes examples of using quick date buttons.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/between-time.md#_snippet_0

LANGUAGE: Vue/uni-app
CODE:
```
<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">时间区间选择 xBetweenTime</x-text>
			<x-text color="#999999">快速的时间区间选择器，方便时间选择自动判断前后时间大小并校正。</x-text>
		</x-sheet>
		
		<x-sheet>
		
			<x-between-time start="2020-1-9" end="2026-5-26" v-model="newdata" v-model:model-str="nowVal">
				<x-button :block="true">打开时间</x-button>
			</x-between-time>

			<x-sheet :margin="['0','24']" color="#f5f5f5" dark-color="#333">
				<x-text color="#999999">选中的值：{{newdata}}</x-text>
				<x-text color="#999999">经format的值：{{nowVal}}</x-text>
			</x-sheet>
			<x-button skin='thin' :block="true" @click="newdata = ['2024-3-21','2026-1-13']">赋值</x-button>
		</x-sheet>
	
		<x-sheet>
			<x-text font-size="18" class="text-weight-b mb-20">设置快捷按钮</x-text>
			<x-between-time :quick-date="['d','y','7','30','p1','p2']" start="2020-1-9" end="2026-5-26" v-model="newdata" v-model:model-str="nowVal">
				<x-button :block="true">打开时间</x-button>
			</x-between-time>
		
		</x-sheet>
		
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script lang="ts">
	export default {
		data() {

			return {
				nowVal: "",
				newdata:[] as string[]
			};
		},
		methods: {

		},
	}
</script>

<style lang="scss">

</style>
```

--------------------------------

TITLE: Example Page Styling for x-float-drawer CSS
DESCRIPTION: This CSS snippet provides scoped styles for the example page components. It defines the '.heightani' class used in the template, setting up a CSS transition specifically for the 'height' property with a linear timing function to support the dynamic height adjustments driven by the JavaScript logic.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/float-drawer.md#_snippet_3

LANGUAGE: CSS
CODE:
```
<style scoped>
.heightani{
	/* transition-duration: 0ms; */
	transition-property: height;
	transition-timing-function: linear;
	background-color: #ffffff;
	overflow: hidden;
	border-radius: 8px;
}
</style>
```

--------------------------------

TITLE: Example Page Script for x-float-drawer JavaScript
DESCRIPTION: This script provides the logic for the example page using the x-float-drawer. It manages the drawer's visibility via the 'showFloat' data property and includes methods ('onbeforeclose', 'onmovestart', 'onmoveend', 'onheightChange') to handle events emitted by the drawer, specifically manipulating a DOM element's style based on the 'heightChange' event to create a dynamic animation.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/float-drawer.md#_snippet_2

LANGUAGE: JavaScript
CODE:
```
<script>
	export default {
		data() {
			return {
				showFloat:false,
				spr:0,
				ismove:false
			}
		},
		methods: {
			onbeforeclose(){
				// console.log(11)
			},
			onmovestart(){
				let dom = this.$refs['domview']! as UniElement;
				dom.style.setProperty('transition-duration','0ms')
			},
			onmoveend(){
				let dom = this.$refs['domview']! as UniElement;
				dom.style.setProperty('transition-duration','300ms')
				
			},
			onheightChange(pre:number){
				let dom = this.$refs['domview']! as UniElement;
				this.spr = pre*1.5
				// console.log("接收HeightChange事件日志",this.spr)
				dom.style.setProperty('height',Math.ceil(this.spr)+'px')
				// console.log(pre+'%')
			}
		}
	}
</script>
```

--------------------------------

TITLE: Example Usage Script for x-switch-slider (UTS Script)
DESCRIPTION: Provides the script logic for the example page using x-switch-slider in UNIAPP/UTS. It initializes sample data for a list of items, demonstrates populating the list in the beforeMount hook, and includes methods to handle slider open/close events (managing state for multiple sliders), menu item clicks (share, remove), main item clicks, and a special event to manage external scroll disabling. Uses UTSJSONObject for data structure.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/switch-slider.md#_snippet_2

LANGUAGE: UNIAPP/Vue/UTS Script
CODE:
```
<script>
	export default {
		data() {
			return {
				showLeft:false,
				disabledScoll: false,
				testList: [] as UTSJSONObject[]
			};
		},
		beforeMount() {
			for (let i = 0; i < 6; i++) {
				this.testList.push({
					id: Math.random().toString(16).substring(0, 12),
					index: i,
					disabled: i == 1,
					title: i == 1 ? "被禁用" : ("我是对话标题+" + i.toString()),
					subtext: "演示手动管理关闭状态",
					opened:false
				} as UTSJSONObject)
			}

		},
		onLoad() {

		},
		methods: {

			onopen(index:number){
				let oldlist = this.testList.slice(0)
				oldlist = oldlist.map((el:UTSJSONObject,from:number):UTSJSONObject =>{
					if(from!=index){
						el.set("opened",false)
					}else{
						el.set("opened",true)
					}
					return el;
				})
				this.testList = oldlist.slice(0)
			},
			onclose(index:number){
				
			},
			remvoe() {
				console.log('remove')
			},
			share() {
				console.log('share')
			},
			onclick(index : number) {
				uni.showToast({ title: "你点击了：" + index.toString() })
			},
			disablechange(disabled : boolean) {
				this.disabledScoll = disabled;
			}
		}
	}
</script>
```

--------------------------------

TITLE: Example Usage Template for xCountdown (UNIAPP Vue)
DESCRIPTION: Provides a complete UNIAPP template example showcasing the integration of `x-countdown` components. It includes conditional compilation directives, layout components (`x-sheet`, `x-text`, `x-button`), and two instances of `x-countdown` configured with different times, units, and formats. It also demonstrates controlling the countdown state (play, pause, reset) using buttons bound to data properties via `v-model:actions`.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/countdown.md#_snippet_1

LANGUAGE: HTML
CODE:
```
<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">倒计时 xCountdown</x-text>
			<x-text  color="#999999" >倒计时，可以精确到秒，毫秒，尽量通过插槽来布局样式。</x-text>
		</x-sheet>
		<x-sheet >
			<view class="flex flex-row flex-row-center-center" >
				<x-countdown font-size="20" color="primary" :time="1000*59" v-model:actions="actions"></x-countdown>
			</view>
			<view class="flex flex-row flex-row-center-center mt-32">
				<x-button width="26%" @click="actions = 'play'">开始</x-button>
				<x-button width="26%" @click="actions = 'pause'" class="mx-20">暂停</x-button>
				<x-button width="26%" @click="actions = 'reset'">重置</x-button>
			</view>
		</x-sheet>
		
		<x-sheet >
			<view class="flex flex-row flex-row-center-center" >
				<x-countdown  font-size="20" color="error" unit="ms" format="SS:MS" :time="1000*5" v-model:actions="actions2"></x-countdown>
			</view>
			<view class="flex flex-row flex-row-center-center mt-32">
				<x-button width="26%" @click="actions2 = 'play'">开始</x-button>
				<x-button width="26%" @click="actions2 = 'pause'" class="mx-20">暂停</x-button>
				<x-button width="26%" @click="actions2 = 'reset'">重置</x-button>
			</view>
		</x-sheet>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
```

--------------------------------

TITLE: Example Vue Script with x-markdown Interaction
DESCRIPTION: This script demonstrates the data properties, lifecycle hooks, and methods used with the x-markdown component, including initializing markdown content, handling tag click events, simulating stream-like content updates, and appending text.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/markdown.md#_snippet_2

LANGUAGE: Javascript
CODE:
```
<script>


	export default {
		data() {
			return {
				ids:0,
				str:
`# 全局配置
## 介绍

本配置参数会影响整个app风格，请慎重配置，或者根据你的UI/UX设计师指示配置

**可以在任意位置导入并设置，立即生效，全局响应**\n**堙**

| This header    | spans two | Header A |
|-------------|------------|----------|
| Cell A      | Cell B     | Cell C   |
| Cell A      | Cell B     | Cell C   |
| Cell A      | Cell B     | Cell C   |

## CSS代码
\`\`\`css
<uni-view data-v-361a5606="" class="xSheet" 
style="background-color: rgb(255, 255, 255); 
width: auto; height: auto; border-radius: 14px; border-width: 0px; 
border-color: transparent; margin: 0px 14px 14px; padding: 14px; box-shadow: none; border-style: solid;">
<--!>输入内容<!-->
<\/uni-view>

\`\`\`

\`\`\`css
const highlight = "code";
\`\`\`


`
			}
		},
		onLoad(){
			
		},
		onUnload(){
			
			clearInterval(this.ids)
		},
		methods: {
			ontagclick(detail:UTSJSONObject){
				let text = detail.getString('attr')
				text = text == null?'':(text!)
				uni.showToast({
					title:text,
					icon:'none'
				})
			},
			sse(){
				// 下面是演示流式解析markdown
				let list = [
					"**你好",
					"**好吧\n",
					"## 好的哦\n",
					"****\n",
					"<a href='https://tmui.design'>点我事件被拦截<\/a> \n被",
					"<span style='color:red'>十的<\/span>",
					`
\`\`\`javascript
const highlight = "code";
\`\`\`

					`
				]
				let i=0;
				let ids = 0;
				let _this = this
				clearInterval(_this.ids)
				this.ids = setInterval(()=>{
					if(i>=list.length){
						clearInterval(_this.ids)
						return;
					}
					_this.str += list[i]
					i++;
				},150)
			},
			getHtml(){
				let el = this.$refs["mk"] as XMarkdownComponentPublicInstance
				el.getHtml()
			},
			myVale(str:string){
				uni.showModal({
					title:"内容",
					content:decodeURIComponent(str),
					showCancel:false
				})
			},
			appendText(){
this.str = this.str + `
辣椒炒肉的热量和营养成分会因配料的比例和烹饪方式有所不同。以下是一个大致的估算，以100克辣椒炒肉为例： \n - **热量**: 约 150-250 千卡 \n - **碳水化合物**: 约 5-10 克 \n - **脂肪**: 约 10-15 克 \n - **蛋白质**: 约 8-12 克 \n 具体数值会根据所使用的肉类（如猪肉、牛肉等）的脂肪含量、辣椒的量、油的使用量以及是否添加其他调料（如酱油、糖）等因素而有所不同。如果你有具体的食材比例，可以更精确地计算这些数值。
`
				
			}
		}
	}
</script>
```

--------------------------------

TITLE: Example Vue Template Structure with x-markdown
DESCRIPTION: This template demonstrates integrating the x-markdown component within a UniApp page structure, using other tmx-ui components like x-sheet, x-text, and x-button, and handling conditional compilation for different platforms.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/markdown.md#_snippet_1

LANGUAGE: Vue
CODE:
```
<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">富文本 markdown</x-text>
		<x-text  color="#999999">
			它支持传入html,markdown格式等内容进行预览，同时也支持动态的相关格式内容解析（常见SSE流式内容更新赋值解析，可能标签被拆分再解析）
			不管你传的是什么格式，建议遵循微信小程序的富文本所支持的标签。这样可以和另一个组件x-edite相互转换编辑和预览。
		</x-text>
	</x-sheet>
	<x-sheet>
		<x-markdown @tagClick="ontagclick" @init="sse" :value="str" ></x-markdown>
		<x-button class="mt-20" @click="appendText" :block="true">追加内容</x-button>
	</x-sheet>
	
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>
```

--------------------------------

TITLE: Calling the Reset Method via Ref in UTS
DESCRIPTION: Provides an example in UTS (UTS is used for APP-specific script setup) demonstrating how to use a component ref (`ref='verify'`) to access the xSlideVerify instance and programmatically call its `reset` method, often triggered by user interaction like a button click.

SOURCE: https://github.com/tmzdy888/tmui4-doc/blob/main/slide-verify.md#_snippet_3

LANGUAGE: UTS
CODE:
```
const verify = ref<XSlideVerifyComponentPublicInstance|null>(null)
const reset = () => {
	if(verify.value==null) return;
	verify.value?.reset?.()
}
```