### Vue Steps Component Example

Source: https://tmui.design/com/steps-item.html

Demonstrates the usage of the tm-steps and tm-steps-item components in Vue. It showcases various configurations like hiding labels, custom states, and interactive steps with custom layouts and descriptions. This example requires the TMUI library to be installed and configured.

```vue
<!--
  - Copyright (c) 2025. tmzdy by @https://tmui.design
  -->

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(3)
const  onChange = (index:number)=>{
	console.log(index)
}
</script>

<template>
	<tm-sheet>
		<tm-text class=" text-weight-b  d-block" font-size="32">步骤条 tmSteps</tm-text>
		<tm-text color="#999999">
			子组件独立，方便灵活自定义。
		</tm-text>
	</tm-sheet>

	<tm-sheet>
		<tm-text class=" text-weight-b mb-n8 d-block" font-size="32">隐藏标签</tm-text>
		<tm-steps :model-value="2" :show-footer="false">
			<tm-steps-item v-for="item in 5" :key="item"></tm-steps-item>
		</tm-steps>
	</tm-sheet>
	<tm-sheet>
		<tm-text class=" text-weight-b mb-n8 d-block" font-size="32">完全自定义状态</tm-text>
		<tm-steps :model-value="1" :show-footer="false" icon-size="36">
			<tm-steps-item v-for="item in 5" :key="item">
				<template v-slot:icon="{active}" >
					<tm-sheet
						:color="active?'primary':'#f5f5f5'"
						class="flex flex-center" height="100%" margin="0" padding="0" round="50%" width="100%">
						<tm-text :color="active?'#fff':'#888'" fontSize="22" >{{item}}</tm-text>
					</tm-sheet>
				</template>
			</tm-steps-item>
		</tm-steps>
	</tm-sheet>
	<tm-sheet>
		<tm-text class=" text-weight-b  d-block" font-size="32">显示标签</tm-text>
		<tm-text class="mb-n8" color="#999999">
			自定状态及进度。并允许点击交互改变进度。
		</tm-text>
		<tm-steps v-model="current" :disabled="false">
			<tm-steps-item>注册帐号</tm-steps-item>
			<tm-steps-item >审核</tm-steps-item>
			<tm-steps-item active-color="error" active-icon="user-unfollow-line">发放牌证</tm-steps-item>
			<tm-steps-item active-color="error" active-icon="close-circle-line">结算</tm-steps-item>
		</tm-steps>
	</tm-sheet>

	<tm-sheet>
		<tm-text class=" text-weight-b  d-block" font-size="32">显示标签</tm-text>
		<tm-text class="mb-n8" color="#999999">
			自定状态及进度。并允许点击交互改变进度。
		</tm-text>
		<tm-steps v-model="current" :disabled="false" :reverse="true" :vertical="true" @change="onChange">
			<tm-steps-item>注册帐号</tm-steps-item>
			<tm-steps-item >
				<template v-slot:default="{active}">
					<tm-sheet :color="active?'primary':'#fff'" :margin="[0,0,0,16]" shadow="20">
						<tm-text :color="active?'#fff':''">自定义布局外观</tm-text>
					</tm-sheet>
				</template>
			</tm-steps-item>
			<tm-steps-item active-color="error" active-icon="user-unfollow-line" desc="发放失败，资料不齐全，请重新提交资料">发放牌证</tm-steps-item>
			<tm-steps-item active-color="error" active-icon="close-circle-line" desc="无法结算">结算</tm-steps-item>
		</tm-steps>
	</tm-sheet>
</template>

<style scoped>

</style>

```

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

### Vue Signature Pad Example (TmSignBoard)

Source: https://tmui.design/com/sign-board.html

This Vue script demonstrates the usage of the TmSignBoard component. It shows how to import the component, get a reference to its instance, and use methods like getImage and clear. The template includes the TmSignBoard within tm-sheet components and buttons to trigger the clear and getImage actions.

```vue
<!--
  - Copyright (c) 2025. tmzdy by @https://tmui.design
  -->
<script setup lang="ts">
import { ref } from 'vue'
import TmSignBoard from "@/uni_modules/tm-ui/components/tm-sign-board/tm-sign-board.vue"
const signBoardRef = ref<InstanceType<typeof TmSignBoard>|null>(null)
const getimage = async () =>{
	let org = await signBoardRef.value?.getImage();
	if(!org) return;
	uni.previewImage({
		urls:[org.src],
		current:org.src
	})
}
const clear = async () =>{
	await signBoardRef.value?.clear();
}

</script>

<template>
    <view>
        <tm-sheet>
            <tm-text font-size="32" class=" text-weight-b  d-block">签名版 TmSignBoard</tm-text>
        </tm-sheet>

        <tm-sheet >
            <tm-sheet width="660" height="660" padding="0" margin="0" color="info">
				<tm-sign-board ref="signBoardRef" width="660" height="660"></tm-sign-board>
			</tm-sheet>
			
			<view class="pa-12 flex flex-row gap-10 mt-n8">
				<tm-button @click="clear" class="flex-1">清空</tm-button>
				<tm-button @click="getimage" class="flex-1">获取图片</tm-button>
			</view>
        </tm-sheet>

    </view>

</template>

<style scoped></style>
```

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

### TmTag Component Usage Example (Vue)

Source: https://tmui.design/com/tag.html

Demonstrates how to use the TmTag component in a Vue template, showcasing different sizes, skins, states, icon integrations, and custom styling options like rounded corners and gradients. This example requires the TMUI framework to be installed and configured.

```vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mt-16">标签 TmTag</tm-text>
            <view class="mb-16">
                <tm-text>样式丰富塑造性好。</tm-text>
            </view>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b">大小</tm-text>
            <view class="flex flex-row flex-row-top-start flex-wrap gap-15 mt-16">
                <tm-tag size="xs">极小</tm-tag>
                <tm-tag size="s">小</tm-tag>
                <tm-tag size="m">中等</tm-tag>
                <tm-tag>默认</tm-tag>
                <tm-tag size="g">大标签</tm-tag>
            </view>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b flex d-block mb-16">状态及样式</tm-text>
            <view class="flex flex-row flex-row-top-start flex-wrap gap-15">
                <tm-tag :disabled="true">禁用</tm-tag>
                <tm-tag skin="outlined">outlined</tm-tag>
                <tm-tag skin="thin">thin</tm-tag>
                <tm-tag skin="dashed">dashed</tm-tag>
                <tm-tag>normal</tm-tag>
                <tm-tag skin="text">text</tm-tag>

            </view>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">图标</tm-text>
            <view class="flex flex-row flex-row-top-start flex-wrap gap-15">
                <tm-tag icon="thumb-up-fill" round="42" style="padding: 0 24rpx;">图标</tm-tag>
                <tm-tag icon="reply-line" color="error" size="n">回复</tm-tag>
                <tm-tag icon="verified-badge-fill" skin="outlined" iconSize="52" size="n" btnIcon></tm-tag>
                <tm-tag skin="thin" icon="thumb-up-fill">为您点赞</tm-tag>
                <tm-tag skin="thin" color="info" icon="verified-badge-line">这是一个非常长的小标签</tm-tag>
                <tm-tag skin="outlined" icon="thumb-up-fill">为您点赞</tm-tag>
                <tm-tag skin="dashed" color="success" icon="thumb-up-fill">为您点赞</tm-tag>

            </view>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class="text-weight-b mb-16 d-block">其它自定样式</tm-text>
            <view class="flex flex-wrap gap-15">
                <tm-tag skin="outlined" :round="[20, 0, 20, 0]">加载中</tm-tag>
                <tm-tag skin="dashed" :round="[20, 0, 20, 0]">圆角半径</tm-tag>
                <tm-tag color="#4300B1" :linear="['45deg', '#A531DC', '#4300B1']" :round="[20, 0, 20, 0]">渐变</tm-tag>
                <tm-tag skin="thin">浅色</tm-tag>
                <tm-tag :linear="['to right', '#FFEB3A', '#4DEF8E']">渐变</tm-tag>
                <tm-tag :linear="['to right', '#FFC328', '#E20000']">渐变</tm-tag>
                <tm-tag :linear="['to right', '#DD7BFF', '#FF6C6C']">渐变</tm-tag>

            </view>
        </tm-sheet>

    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
</script>

<style></style>
```

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

### Vue Date Picker Example

Source: https://tmui.design/com/picker-date.html

This Vue template demonstrates the usage of the TmPickerDate component for selecting dates. It shows how to set start and end dates, format the output, and handle user interactions like assigning a date and using an embedded date view (TmDateView).

```vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">日期选择器 PickerDate</tm-text>
            <tm-text color="#999999">日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间</tm-text>
        </tm-sheet>


        <tm-sheet>
            <tm-picker-date v-model="modelValue" start="2024-1-1" end="2024-9-5" v-model:model-str="nowVal"
                format="YYYY-MM-DD">
                <tm-button :block="true">打开时间</tm-button>
            </tm-picker-date>

            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
                <tm-text color="#999999">选中的值：{{ modelValue }}</tm-text>
                <tm-text color="#999999">经format的值：{{ nowVal }}</tm-text>
            </tm-sheet>
        </tm-sheet>
        <tm-sheet>
            <tm-button skin='thin' :block="true" @click="modelValue = '2024-3-21'">赋值2024-3-21</tm-button>
        </tm-sheet>

        <tm-sheet>
        
            <tm-text font-size="36" class=" text-weight-b mb-8">内嵌日期选择器 xDateView</tm-text>
            <tm-date-view v-model="nowVal2" start="2022-3-1" end="2024-9-5"></tm-date-view>
            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
                <tm-text color="#999999">选中的值：{{ nowVal2 }}</tm-text>
            </tm-sheet>
            
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b">精确到秒</tm-text>
        </tm-sheet>
        <tm-sheet>
            <tm-picker-date type="second">
                <tm-button :block="true">打开时间</tm-button>
            </tm-picker-date>
        </tm-sheet>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const nowVal = ref("")
const nowVal2 = ref("")
const modelValue = ref("")
</script>

<style lang="scss"></style>

```

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

### Vue Drawer Examples: Basic Usage and Positioning

Source: https://tmui.design/com/drawer.html

Demonstrates the basic usage of the tm-drawer component in Vue, showcasing different positioning options (left, right, top, bottom). It highlights how to use the 'trigger' slot for custom button-based opening and basic content display within the drawer.

```vue
<script setup lang="ts">
import { ref } from "vue"
const show = ref(false)
const beforeClose = () => {
    return new Promise<boolean>((resolve) => {
        setTimeout(() => {
            resolve(true)
        }, 3000)
    })
}
</script>
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">抽屉 Drawer</tm-text>
            <tm-text color="#999999">
                提供四个方向的弹出，如果要居中显示，请使用overlay组件。可以设置高为auto,百分比,最大值
                可以是插槽触发或者变量控制触发
            </tm-text>
        </tm-sheet>

        <tm-sheet class="flex flex-row flex-row-center-between">
            <tm-drawer style="width:24%" size="80%" position="left">
                <template #trigger><tm-button :block="true">左弹出</tm-button></template>
                <tm-picker-date>
                    <tm-button :block="true">左弹出</tm-button>
                </tm-picker-date>
            </tm-drawer>
            <tm-drawer style="width:24%" position="right">
                <template #trigger><tm-button :block="true">右弹出</tm-button></template>
            </tm-drawer>
            <tm-drawer :swiper-len-close="100" style="width:24%" :show-title="false" :show-close="true" position="top">
                <tm-text>此弹层有内容开启了事件协商和手势关闭,向上滑一定的距离能关闭弹层。</tm-text>
                <template #trigger><tm-button :block="true">顶弹出</tm-button></template>
            </tm-drawer>
            <tm-drawer style="width:24%" :show-close="true" position="bottom">
                <template #trigger>
                    <tm-button :block="true">底弹出</tm-button>
                </template>
            </tm-drawer>
        </tm-sheet>


        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-24 d-block">嵌套</tm-text>
            <tm-drawer :show-footer="true" size="auto">
                <template v-slot:trigger><tm-button color="success" :block="true">打开嵌套</tm-button></template>
				
                <tm-drawer size="auto">
                    <template v-slot:trigger><tm-button :block="true">打开嵌套1</tm-button></template>
                    <tm-text class="text-size-m text-grey  line-8">当前弹层内容为自动高度</tm-text>
                    <tm-drawer size="auto">
                        <template v-slot:trigger><tm-button color="success" :block="true">打开嵌套2</tm-button></template>
                        <tm-text class="text-size-m text-grey  line-8">当前弹层内容为自动高度</tm-text>
                    </tm-drawer>
                </tm-drawer>
            </tm-drawer>

        </tm-sheet>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-24 d-block">确认前异步执行beforeClose</tm-text>
            <tm-drawer :beforeClose="beforeClose" :show-footer="true">
                <template v-slot:trigger><tm-button color="warn" :block="true">打开</tm-button></template>
                <tm-text>点确认 按钮，会等待3秒再关闭。</tm-text>
            </tm-drawer>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-10 d-block">默认高度，禁用遮罩关闭</tm-text>
            <tm-text color="#999999" class="mb-24 d-block">
                点击遮罩禁用关闭,同时内容出现弹跳提示
            </tm-text>

            <tm-drawer :overlayClick="false" :show-close="true" :showCancel="false" size="550rpx" title="请阅读协议"
                confirmText="我已阅读" position="right">
                <template #trigger><tm-button :block="true" color="error">禁用遮罩,弹跳提醒</tm-button></template>
                <tm-text color="#999999">
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                </tm-text>
            </tm-drawer>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-24 d-block">底部插槽及变量控制显示</tm-text>
            <tm-button @click="show = true" :block="true">打开</tm-button>
            <tm-drawer v-model:show="show" title="内容可滚动" size="30%" position="bottom" :show-footer="true">
                <tm-text color="#999999">
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格
                    精致美观的对话框，可全局配置风格

```

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

### Basic Flexbox Layout Example

Source: https://tmui.design/CSSTool/css.html

An example of using TMUI's flexbox utility classes to create a simple row-based layout. The `flex`, `flex-row` classes enable flex container behavior with horizontal arrangement. This is a fundamental building block for responsive layouts.

```vue
<view class="flex flex-row"> </view>
```

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

### TmEchart Vue Component Example

Source: https://tmui.design/com/echart.html

Demonstrates the usage of the TmEchart component in a Vue template. It shows how to initialize a chart with data using the `onInit` event and how to manually set chart options using a ref and the `getChart` method. The example also includes handling click events on chart elements.

```vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">百度图表 TmEchart</tm-text>
            <tm-text color="#999999">
                可以通过onInit或者getChart获取Chart对象来设置更新数据图表。点击数据可以响应事件。
            </tm-text>
        </tm-sheet>

        <tm-sheet>
            <tm-echart @click="click" @onInit="onInit"></tm-echart>
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">可以通过ref来初始数据</tm-text>

            <tm-button block @click="setOption">手动赋值</tm-button>
            <tm-echart ref="echart"></tm-echart>
        </tm-sheet>

    </view>
</template>
<script setup lang="ts">
import TmEchart from '@/uni_modules/tm-ui/components/tm-echart/tm-echart.vue';
import { ECharts } from 'echarts';
import { ref } from 'vue';
const echart = ref<InstanceType<typeof TmEchart> | null>(null)
const onInit = (chart: ECharts) => {
    
    chart.setOption({
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                areaStyle: {}
            }
        ]
    })
}
const click = (evt: any) => {
    console.log(evt)
    uni.showToast({ title: evt.data + '', icon: 'none' })
}
const setOption = async () => {
    let chart = await echart.value?.getChart()
    chart?.setOption({
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    })
}
</script>
<style lang="scss" scoped></style>
```

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

### TMUI Drawer Component

Source: https://tmui.design/com/drawer.html

API documentation for the tm-drawer component, including configuration parameters, events, and slots.

```APIDOC
## Component: tm-drawer

### Description
A highly customizable drawer component that supports global style configuration, various positioning, and interactive slots.

### Parameters
- **customStyle** (string) - Optional - Custom overlay style
- **title** (string) - Optional - Drawer title
- **showFooter** (boolean) - Optional - Show bottom action bar
- **showTitle** (boolean) - Optional - Show title bar
- **showClose** (boolean) - Optional - Show close button
- **overlayClick** (boolean) - Optional - Allow closing by clicking the overlay
- **show** (boolean) - Required - Controls visibility (supports v-model)
- **position** (string) - Optional - Drawer opening direction (default: "bottom")
- **size** (string|number) - Optional - Content width/height percentage or auto
- **zIndex** (string|number) - Optional - Layer index (default: 1100)
- **lazy** (boolean) - Optional - Lazy load content to improve animation performance

### Events
- **click** - Triggered when clicking the overlay
- **close** - Triggered when the drawer closes
- **open** - Triggered when the drawer opens
- **cancel** - Triggered when the cancel button is clicked
- **confirm** - Triggered when the confirm button is clicked

### Slots
- **trigger** - Custom trigger element
- **title** - Custom title area
- **default** - Main content area
- **footer** - Bottom action bar area

### Ref Methods
- **beforeClose** - Async function to intercept closing logic; return false to prevent closing.
```

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

### TmSwitch Component Example (Vue)

Source: https://tmui.design/com/switch.html

Demonstrates the usage of the TmSwitch component in a Vue template. It showcases various configurations including size, labels, colors, disabled and loading states, and rounded corners. The example utilizes tm-sheet and tm-text components for layout and display.

```vue
<template>
	<view>
		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b mb-16 d-block">开关 tmSwitch</tm-text>
			<tm-text color="#999999">样式可全局配置，统一修改风格</tm-text>
		</tm-sheet>
		<tm-sheet class="flex flex-row gap-10">
			<tm-switch size="small"></tm-switch>
			<tm-switch ></tm-switch>
			<tm-switch @change="onchange" v-model="kaiguan" size="large"></tm-switch>
		</tm-sheet>

		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b ">显示内文字</tm-text>
		</tm-sheet>
		<tm-sheet class="flex flex-row gap-10">
			<tm-switch :label='["开", "关"]'></tm-switch>
			<tm-switch  :label='["ON", "OFF"]'></tm-switch>
		</tm-sheet>

		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b">修改颜色</tm-text>
		</tm-sheet>
		<tm-sheet class="flex flex-row gap-10">
			<tm-switch :modelValue="true" color="danger"></tm-switch>
			<tm-switch :modelValue="true"  color="success"></tm-switch>
			<tm-switch :modelValue="true" color="error"></tm-switch>
		</tm-sheet>

		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b">状态</tm-text>
		</tm-sheet>
		<tm-sheet class="flex flex-row gap-10">
			<tm-switch :modelValue="true" :disabled="true"></tm-switch>
			<tm-switch :modelValue="true"  :loading="true"></tm-switch>
		</tm-sheet>

		<tm-sheet>
			<tm-text font-size="36" class=" text-weight-b">圆角风格,及修改间隙</tm-text>
		</tm-sheet>
		<tm-sheet class="flex flex-row gap-10">
			<tm-switch round="4" space="6px"></tm-switch>
			<tm-switch round="6" ></tm-switch>
		</tm-sheet>

		<view class="py-20"></view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const kaiguan = ref(false)
const onchange = (open: boolean) => {

}
</script>

<style></style>

```

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

### TmTabs Navigation Component Example (Vue)

Source: https://tmui.design/com/tabs.html

Demonstrates the usage of the TmTabs component in Vue.js, showcasing various configurations for displaying navigation tabs with different styling, data, and interactive elements. It includes examples for basic tabs, equal distribution, custom colors, and custom styles.

```vue
<script setup lang="ts">
import { ref, computed, onMounted, watch, PropType } from 'vue';
const data2 = ref(['待配送', '售后中', { id: 'tmui', title: '待收款', dot: 'hot' }])
const data3 = ref(['待配送', { id: 'tmui', title: '待收款', dot: 22 }, '售后中'])
const data = ref(['全部',{title:'禁用项',disabled:true}, { id: 'tmui', title: '待收款', dot: 'hot' }, '待配送', '售后中', { title: '已退款', dot: 3 }, '待配送', '售后中', '已退款'])

</script>
<template>
    <view>
        <tm-sheet :margin="['0', '0', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b mb-16 d-block">标签导航 tmTabs</tm-text>
            <tm-text color="#999999">tabs标签导航组件,样式非常丰富可以完成你想要的自定义样式.</tm-text>
        </tm-sheet>
        <tm-tabs :list="data"></tm-tabs>
        <tm-sheet :margin="['0', '20', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b">均分</tm-text>
        </tm-sheet>
        <tm-tabs item-width="33.33%" :list="data2"></tm-tabs>
        <tm-sheet :margin="['0', '20', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b">均分线等宽修改激活色</tm-text>
        </tm-sheet>
        <tm-tabs item-width="33.33%" gap="0" line-full line-height="2px" active-title-color="warn"
            :list="data2"></tm-tabs>
        <tm-sheet :margin="['0', '20', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b">自定背景相关</tm-text>
        </tm-sheet>
        <tm-tabs item-width="33.33%" gap="0" line-full line-height="2px" color="primary" dot-bg-color="warn"
            title-color="#acdaff" active-title-color="white" :list="data3"></tm-tabs>
        <tm-sheet :margin="['0', '20', 0, 20]">
            <tm-text font-size="36" class=" text-weight-b">使用自定style完全覆盖样式</tm-text>
        </tm-sheet>
        <tm-tabs 
        custom-item-style="color:#000;"
        active-item-style="background:#f5f5f5"
        :list="data"></tm-tabs>
    </view>
</template>
<style scoped>
.tmTabsWrapBox {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 200px;
    height: 44px;
}
</style>
```

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

### Grid Layout Example

Source: https://tmui.design/CSSTool/css.html

Shows how to implement a grid layout using TMUI's `grid` and `grid-col-[x]` classes. This allows elements to be arranged in a specified number of columns per row, with automatic wrapping to the next line.

```vue
class="grid grid-col-5"
```

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

### Vue Date Picker Example with TmPickerDate

Source: https://tmui.design/com/date-view.html

This Vue template demonstrates the usage of the TmPickerDate component for selecting dates. It allows customization of start and end dates, date formatting, and provides examples for setting values and displaying selected dates. It also shows how to use the component for second-level precision.

```vue
<template>
    <view>
        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b mb-8 d-block">日期选择器 PickerDate</tm-text>
            <tm-text color="#999999">日期选择，可以控制显示精确到秒。默认的开始时间为当前时间的上一年，结束时间为默认当前时间</tm-text>
        </tm-sheet>


        <tm-sheet>
            <tm-picker-date v-model="modelValue" start="2024-1-1" end="2024-9-5" v-model:model-str="nowVal"
                format="YYYY-MM-DD">
                <tm-button :block="true">打开时间</tm-button>
            </tm-picker-date>

            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
                <tm-text color="#999999">选中的值：{{ modelValue }}</tm-text>
                <tm-text color="#999999">经format的值：{{ nowVal }}</tm-text>
            </tm-sheet>
        </tm-sheet>
        <tm-sheet>
            <tm-button skin='thin' :block="true" @click="modelValue = '2024-3-21'">赋值2024-3-21</tm-button>
        </tm-sheet>

        <tm-sheet>
        
            <tm-text font-size="36" class=" text-weight-b mb-8">内嵌日期选择器 xDateView</tm-text>
            <tm-date-view v-model="nowVal2" start="2022-3-1" end="2024-9-5"></tm-date-view>
            <tm-sheet :margin="['0', '24', '0', '0']" color="#f5f5f5" dark-color="#333">
                <tm-text color="#999999">选中的值：{{ nowVal2 }}</tm-text>
            </tm-sheet>
            
        </tm-sheet>

        <tm-sheet>
            <tm-text font-size="36" class=" text-weight-b">精确到秒</tm-text>
        </tm-sheet>
        <tm-sheet>
            <tm-picker-date type="second">
                <tm-button :block="true">打开时间</tm-button>
            </tm-picker-date>
        </tm-sheet>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const nowVal = ref("")
const nowVal2 = ref("")
const modelValue = ref("")
</script>

<style lang="scss"></style>
```

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

### Basic tm-drawer Usage with Footer

Source: https://tmui.design/com/drawer.html

Demonstrates the basic implementation of the tm-drawer component, including how to define a custom footer slot with a button. This snippet shows the core structure for using the drawer.

```vue
<template>
    <view>
        <tm-sheet>
            <tm-drawer :show="show" :round="" :height="''" :width="'100%'" :mask="true" :overlayClick="true" :customStyle="''" :zIndex="1100" :showClose="false" :showFooter="true" :showTitle="false" :closeOnKeyback="true" :duration="300" :beforeClose="() => true" :disabled="false" :disableTeleport="false" :widthCoverCenter="false" :offsetTop="0" :bgColor="'white'" :darkBgColor="''" :contentMargin="'24'" :maxHeight="''" :lazy="false" :position="'bottom'" :cancelText="$i18n.t('tmui32x.cancelText')" :confirmText="$i18n.t('tmui32x.confirmText')" @click="" @close="" @open="" @beforeOpen="" @beforeClose="" @update:show="show = $event" @cancel="" @confirm="">
                <tm-text :font-size="28" :bold="true" :color="'primary'" _class="" _style="" :label="'精致美观的对话框，可全局配置风格'"></tm-text>
                <template #footer>
                    <tm-button @click="show = false" :block="true" color="red" class="flex-1">定义底部插槽</tm-button>
                </template>
            </tm-drawer>
        </tm-sheet>
        <view style="height:50px"></view>
    </view>
</template>

<script lang="ts" setup>
import tmButton from "@/tmui/components/tm-button/tm-button.vue";
import tmDrawer from "@/tmui/components/tm-drawer/tm-drawer.vue";
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue";
import tmText from "@/tmui/components/tm-text/tm-text.vue";
import {
    ref
} from "vue";

const show = ref(true);
</script>
```

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

### Register TMUI in Vue main.ts

Source: https://tmui.design/32vue/%E5%AE%89%E8%A3%85.html

Configures the Vue application instance by installing Pinia, the router, and the TMUI component library. This is the entry point for initializing the UI framework within a Vue project.

```typescript
import { createApp } from 'vue'
// @ts-ignore
import './style.css'
import App from './App.vue'
//必须安装
import { createPinia } from 'pinia'
//必须安装
import router from './router'
// 引入组件包
import tmui from './components/tm-ui'

const app = createApp(App)
app.use(createPinia())
app.use(router)
// 最后引用安装好。
app.use(tmui)
app.mount('#app')
```

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

### Implement pull-to-refresh and bottom-loading with tmPullRefresh

Source: https://tmui.design/com/pull-refresh.html

This example demonstrates how to use the tmPullRefresh component within a Vue 3 setup script. It defines asynchronous functions for both pull-down and bottom-loading events, returning a promise to signal completion.

```vue
<template>
    <view style="height: calc(100vh - 44px);" class="flex flex-col">
        <tm-pull-refresh :frist-load="false" style="height: 100%;"
        :pull-refresh="handleRefresh" 
        :bottom-refresh="bootmHandleRefresh" >
            <tm-sheet>
                <tm-text font-size="36" class="text-weight-b mb-16 d-block">下拉刷新</tm-text>
                <view>
                    <tm-text>请拖拉下拉刷新</tm-text>
                </view>
            </tm-sheet>
            <tm-sheet height="800px">
                <tm-text font-size="36" class="text-weight-b mb-16 d-block">触底刷新</tm-text>
                <view>
                    <tm-text>上拖触底刷新</tm-text>
                </view>
            </tm-sheet>
        </tm-pull-refresh>
    </view>
</template>
<script setup lang="ts">
const handleRefresh = ():Promise<boolean> => {
    console.log('刷新');
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('完成');
            resolve(true);
        }, 3*1000);
    })
}
const bootmHandleRefresh = async ():Promise<boolean> => {
    console.log('刷新');
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('完成');
            resolve(true);
        }, 3000);
    })
}
</script>
<style lang="scss"></style>
```

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

### Implement tmPopover with various positions and content

Source: https://tmui.design/com/popover.html

This example demonstrates how to use the tmPopover component with different positioning attributes (e.g., 'bl', 'bc', 'tl'). It shows how to inject custom content like tm-cell lists or tm-calendar-multiple components into the popover menu slot.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const show = ref(false)
const dates = ref([])
</script>

<template>
	<view>
		<tm-sheet>
			<tm-text font-size="32" class=" text-weight-b mb-16 d-block">汽泡菜单 tmPopover</tm-text>
			<tm-text color="#999999">
				多达8个位置可选，当显示位置不足时可以自动反转位置。
			</tm-text>
		</tm-sheet>

		<tm-sheet class="flex flex-row gap-20 flex-row-center-between">
			<tm-popover position="bl">
				<tm-button :round="88" size="s" font-size="46" :btnIcon="true" icon='skip-right-fill'></tm-button>
				<template v-slot:menu="{isShow}">
					<tm-sheet  :margin="0" :padding="0" class="overflow" shadow="24">
						<tm-cell :bottomBorderInsert="true" :card="false" url="/pages/index/button" icon="stack-line"
								 desc="UTS版本tmui组件库,高质量库" title="常见组件库"></tm-cell>
						<tm-cell title="程序设置" :bottomBorderInsert="true" :card="false" url="/pages/index/icon"
								 icon="price-tag-3-line" label="+￥32" label-color="red" icon-color="red"></tm-cell>
					</tm-sheet>
				</template>
			</tm-popover>
			<tm-popover v-model="show" :is-click-close="false" :show-mask="true" position="bc" triangle-color="primary">
				<template v-slot:default="{isShow}">
					<tm-button :round="88" size="s" :btnIcon="true" font-size="46" :skin="isShow?'normal':'outlined'" :icon="isShow?'arrow-up-s-fill':'arrow-down-s-fill'"></tm-button>
				</template>
				<template v-slot:menu="{isShow}">
					<tm-sheet  :margin="0" :padding="0" class="overflow" shadow="24" style="max-width:450px" width="90vw">
						<tm-calendar-multiple v-model="dates" :multiple-max="1" :show-footer="false" head-bg-color="primary" head-font-color="#fff" @click="show = false"></tm-calendar-multiple>
					</tm-sheet>
				</template>
			</tm-popover>
		</tm-sheet>
	</view>
</template>
```