侧边栏导航 Sidemenu ​

<template>
	<tm-app>
		<tm-side-menu v-model:active="active" :itemHeight="100" :list="list">
			<tm-text _class="pa-32" label="这边是你的内容区域"></tm-text>
		</tm-side-menu>
		<tm-sheet :margin="[0, 32]" _class="flex flex-row flex-row-center-start">
			<tm-divider color="yellow" vertical :height="30" realColor :border="8"></tm-divider>
			<tm-text label="可以根据自己的需求更新你的配色方案"></tm-text>
		</tm-sheet>
		<tm-side-menu
			v-model:active="active"
			menuActiveFontColor="yellow"
			menuFontColor="black"
			menuBarBgColor="yellow"
			:itemHeight="100"
			:list="list"
		>
			<tm-text _class="pa-32" label="这边是你的内容区域"></tm-text>
		</tm-side-menu>
	</tm-app>
</template>

<script lang="ts" setup>
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmApp from '@/tmui/components//tm-app//tm-app.vue'
import tmSideMenu from '@/tmui/components/tm-side-menu/tm-side-menu.vue'
import { ref } from 'vue'
const active = ref(3)
const list = ref([
	{ text: '广东', id: 1 },
	{ text: '北京', id: 2 },
	{ text: '江苏', id: 3, dotCount: 6 },
	{ text: '南昌', id: 4, icon: 'tmicon-md-chatboxes' },
	{ text: '上海', id: 5 },
	{ text: '吃菠菜吃菠菜吃菠菜', id: 6, dotCount: 6 },
	{ text: 'Hellow', id: 7 },
	{ text: 'Github', id: 8, dotCount: 1 },
	{ text: 'Vue', id: 9 },
	{ text: 'Uniapp', id: 10 }
])
</script>

<style></style>