add vitepress docs

2026-09-21 16:05:14 +08:00
parent b435bf992e
commit 37cf38fe27
73 changed files with 7003 additions and 802 deletions
@@ -0,0 +1,68 @@
+<template>
+	<div class="demo">
+		<section class="block">
+			<h4 v-text="'水平（默认 medium）'" />
+			<space>
+				<div v-for="item in 3" :key="item" class="box" v-text="`项 ${item}`" />
+			</space>
+		</section>
+
+		<section class="block">
+			<h4 v-text="'预设尺寸 small / large'" />
+			<space size="small">
+				<div v-for="item in 3" :key="item" class="box" v-text="`项 ${item}`" />
+			</space>
+			<space size="large">
+				<div v-for="item in 3" :key="item" class="box" v-text="`项 ${item}`" />
+			</space>
+		</section>
+
+		<section class="block">
+			<h4 v-text="'垂直排列'" />
+			<space direction="vertical">
+				<div v-for="item in 3" :key="item" class="box" v-text="`项 ${item}`" />
+			</space>
+		</section>
+
+		<section class="block">
+			<h4 v-text="'分隔符'" />
+			<space separator="|">
+				<span v-for="item in 3" :key="item" v-text="`项 ${item}`" />
+			</space>
+		</section>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Space } from "timi-tdesign-mobile";
+</script>
+
+<style lang="less" scoped>
+.demo {
+	.block {
+		margin-bottom: 1.25rem;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	h4 {
+		margin: 0 0 .5rem;
+		font-size: .8125rem;
+	}
+
+	.box {
+		padding: .375rem .625rem;
+		font-size: .75rem;
+		border-radius: .375rem;
+		color: var(--vp-c-brand-1);
+		background: var(--vp-c-default-soft);
+	}
+
+	span {
+		font-size: .75rem;
+		color: var(--vp-c-text-2);
+	}
+}
+</style>