chore: affix & anchor & dropdown & pagination & tabs demo space

src/affix/_example/base.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="affix-base">
+  <t-space>
     <t-affix ref="affix" :offset-top="140" :offset-bottom="20">
       <t-button>固钉</t-button>
     </t-affix>
-  </div>
+  </t-space>
 </template>

src/anchor/_example/container.vue

@@ -6,13 +6,13 @@
       <t-anchor-item :href="`#${path}#content-3`" title="content-3" />
       <t-anchor-item :href="`#${path}#content-4`" title="content-4" />
     </t-anchor>
-    <div id="anchor-container">
+    <t-space id="anchor-container" direction="vertical" :size="0">
       <div :id="`${path}#content-1`" class="anchor-content-1">anchor-content-1</div>
       <div :id="`${path}#content-2`" class="anchor-content-2">anchor-content-2</div>
       <div :id="`${path}#content-3`" class="anchor-content-3">anchor-content-3</div>
       <div :id="`${path}#content-4`" class="anchor-content-4">anchor-content-4</div>
       <div :id="`${path}#content-5`" class="anchor-content-5">anchor-content-5</div>
-    </div>
+    </t-space>
   </div>
 </template>
 <script setup>
@@ -35,7 +35,7 @@ const handleClick = ({ e, href, title }) => {
   flex-grow: 1;
   height: 200px;
   overflow: auto;
-  > div {
+  div {
     text-align: center;
     font-size: 22px;
     line-height: 100px;

src/anchor/_example/cursor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="anchor-demo">
+  <t-space class="anchor-demo">
     <t-anchor :bounds="150">
       <template #cursor>
         <div class="test-cursor" />
@@ -12,7 +12,7 @@
       <t-anchor-item :href="`#${path}#anchor-target-6`" title="保密协议" />
       <t-anchor-item :href="`#${path}#anchor-target-7`" title="其他" />
     </t-anchor>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';

src/anchor/_example/large.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="`${path}#large`" class="anchor-demo">
+  <t-space :id="`${path}#large`" class="anchor-demo">
     <t-anchor size="large">
       <t-anchor-item :href="`#${path}#default`" title="定义" />
       <t-anchor-item :href="`#${path}#multiple`" title="服务功能" />
@@ -9,7 +9,7 @@
       <t-anchor-item :href="`#${path}#anchor-target-6`" title="保密协议" />
       <t-anchor-item :href="`#${path}#anchor-target-7`" title="其他" />
     </t-anchor>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';

src/anchor/_example/multiple.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="`${path}#multiple`" class="anchor-demo">
+  <t-space :id="`${path}#multiple`" class="anchor-demo">
     <t-anchor :bounds="100" :target-offset="200">
       <t-anchor-item :href="`#${path}#default`" title="定义" />
       <t-anchor-item :href="`#${path}#multiple`" title="服务功能" />
@@ -10,7 +10,7 @@
       <t-anchor-item :href="`#${path}#anchor-target-6`" title="保密协议" />
       <t-anchor-item :href="`#${path}#anchor-target-7`" title="其他" />
     </t-anchor>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';

src/anchor/_example/small.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="`${path}#small`" class="anchor-demo">
+  <t-space :id="`${path}#small`" class="anchor-demo">
     <t-anchor size="small">
       <t-anchor-item :href="`#${path}#default`" title="定义" />
       <t-anchor-item :href="`#${path}#multiple`" title="服务功能" />
@@ -9,7 +9,7 @@
       <t-anchor-item :href="`#${path}#anchor-target-6`" title="保密协议" />
       <t-anchor-item :href="`#${path}#anchor-target-7`" title="其他" />
     </t-anchor>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { computed, getCurrentInstance } from 'vue';

src/anchor/_example/target.vue

@@ -1,13 +1,13 @@
 <template>
-  <div :id="`${path}#anchor-target`" class="anchor-demo">
+  <t-space :id="`${path}#anchor-target`" class="anchor-demo" direction="vertical" :size="0">
     <t-anchor-target :id="`${path}#anchor-target-1`"> 定义 </t-anchor-target>
     <t-anchor-target :id="`${path}#anchor-target-2`"> 服务功能 </t-anchor-target>
     <t-anchor-target :id="`${path}#anchor-target-3`"> 使用指南 </t-anchor-target>
     <t-anchor-target :id="`${path}#anchor-target-4`"> 创建签名 </t-anchor-target>
     <t-anchor-target :id="`${path}#anchor-target-5`"> 创建内容 </t-anchor-target>
     <t-anchor-target :id="`${path}#anchor-target-6`"> 保密协议 </t-anchor-target>
     <t-anchor-target :id="`${path}#anchor-target-7`"> 其他 </t-anchor-target>
-  </div>
+  </t-space>
 </template>
 
 <script setup>

src/dropdown/_example/base.vue

@@ -1,47 +1,28 @@
 <template>
-  <div class="tdesign-demo-dropdown">
+  <t-space>
     <t-dropdown :options="options" :min-column-width="112" @click="clickHandler">
-      <div class="tdesign-demo-dropdown-trigger">
+      <t-space>
         <t-button variant="text">
-          <span class="tdesign-demo-dropdown__text"> 下拉菜单 <t-icon name="chevron-down" size="16" /> </span>
+          <t-space :size="0">
+            下拉菜单
+            <t-icon name="chevron-down" size="16" />
+          </t-space>
         </t-button>
-      </div>
+      </t-space>
     </t-dropdown>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { MessagePlugin } from 'tdesign-vue-next';
 
 const options = [
-  {
-    content: '操作一',
-    value: 1,
-  },
-  {
-    content: '操作二',
-    value: 2,
-  },
-  {
-    content: '操作三',
-    value: 3,
-  },
-  {
-    content: '操作四',
-    value: 4,
-  },
+  { content: '操作一', value: 1 },
+  { content: '操作二', value: 2 },
+  { content: '操作三', value: 3 },
+  { content: '操作四', value: 4 },
 ];
 
 const clickHandler = (data) => {
   MessagePlugin.success(`选中【${data.content}】`);
 };
 </script>
-<style lang="less" scoped>
-.tdesign-demo-dropdown {
-  &__text {
-    display: inline-flex;
-    .t-icon {
-      margin-left: 8px;
-    }
-  }
-}
-</style>

src/dropdown/_example/button.vue

@@ -1,37 +1,20 @@
 <template>
-  <div>
+  <t-space>
     <t-dropdown :options="options" @click="clickHandler">
-      <t-button theme="default" variant="outline"> 下拉菜单 </t-button>
+      <t-button theme="default" variant="outline">下拉菜单</t-button>
     </t-dropdown>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { MessagePlugin } from 'tdesign-vue-next';
 
 const options = [
-  {
-    content: '操作一',
-    value: 1,
-  },
-  {
-    content: '操作二',
-    value: 2,
-  },
-  {
-    content: '操作三',
-    value: 3,
-  },
-  {
-    content: '操作四',
-    value: 4,
-  },
+  { content: '操作一', value: 1 },
+  { content: '操作二', value: 2 },
+  { content: '操作三', value: 3 },
+  { content: '操作四', value: 4 },
 ];
 const clickHandler = (data) => {
   MessagePlugin.success(`选中【${data.content}】`);
 };
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

src/dropdown/_example/custom.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <t-space>
     <t-dropdown :options="options" trigger="click" :hide-after-item-click="false" :min-column-width="100">
-      <t-button variant="text"> 下拉菜单 </t-button>
+      <t-button variant="text">下拉菜单</t-button>
     </t-dropdown>
-  </div>
+  </t-space>
 </template>
 <script setup lang="ts">
 const options = [
@@ -35,8 +35,3 @@ const options = [
   },
 ];
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

src/dropdown/_example/disabled.vue

@@ -1,41 +1,22 @@
 <template>
-  <div class="tdesign-demo-dropdown">
+  <t-space>
     <t-dropdown :options="options" :min-column-width="112">
       <t-button variant="text">
-        <span class="tdesign-demo-dropdown__text">
+        <t-space :size="0">
           下拉菜单
           <chevron-down-icon size="16" />
-        </span>
+        </t-space>
       </t-button>
     </t-dropdown>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { ChevronDownIcon } from 'tdesign-icons-vue-next';
 
 const options = [
-  {
-    content: '选项一',
-    value: 1,
-  },
-  {
-    content: '选项二',
-    value: 2,
-  },
-  {
-    content: '选项三',
-    value: 3,
-    disabled: true,
-  },
-  {
-    content: '选项四',
-    value: 4,
-    disabled: true,
-  },
+  { content: '选项一', value: 1 },
+  { content: '选项二', value: 2 },
+  { content: '选项三', value: 3, disabled: true },
+  { content: '选项四', value: 4, disabled: true },
 ];
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

src/dropdown/_example/event.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <t-space>
     <t-dropdown :options="options" :min-column-width="88">
-      <t-button variant="text"> 下拉菜单 </t-button>
+      <t-button variant="text">下拉菜单</t-button>
     </t-dropdown>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { MessagePlugin } from 'tdesign-vue-next';
@@ -31,8 +31,3 @@ const options = [
   },
 ];
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

src/dropdown/_example/long.vue

@@ -1,18 +1,13 @@
 <template>
-  <div>
+  <t-space>
     <t-dropdown :options="options" :max-height="400" :min-column-width="88">
-      <t-button variant="text"> 下拉菜单 </t-button>
+      <t-button variant="text">下拉菜单</t-button>
     </t-dropdown>
-  </div>
+  </t-space>
 </template>
 <script setup lang="ts">
-const options = Array.from({ length: 20 }).map((v, k) => ({
+const options = Array.from({ length: 20 }).map((_, k) => ({
   content: `选项${k + 1}`,
   value: k + 1,
 }));
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

src/dropdown/_example/multiple.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="tdesign-demo-dropdown">
+  <t-space class="tdesign-demo-dropdown">
     <t-dropdown :options="options" :max-column-width="120" @click="clickHandler">
       <t-button variant="text">
-        <span class="tdesign-demo-dropdown__text">
+        <t-space :size="0" class="tdesign-demo-dropdown__text">
           下拉菜单
           <chevron-down-icon size="16" />
-        </span>
+        </t-space>
       </t-button>
     </t-dropdown>
-  </div>
+  </t-space>
 </template>
 <script setup>
 import { ChevronDownIcon } from 'tdesign-icons-vue-next';

src/dropdown/_example/slot.vue

@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <t-space>
     <t-dropdown :min-column-width="88" trigger="click" @click="handleClick">
-      <t-button variant="text"> 下拉菜单 </t-button>
+      <t-button variant="text">下拉菜单</t-button>
       <template #dropdown>
         <t-dropdown-menu>
-          <t-dropdown-item :value="1"> 操作一 </t-dropdown-item>
-          <t-dropdown-item :value="2"> 操作二 </t-dropdown-item>
+          <t-dropdown-item :value="1">操作一</t-dropdown-item>
+          <t-dropdown-item :value="2">操作二</t-dropdown-item>
         </t-dropdown-menu>
       </template>
     </t-dropdown>
-  </div>
+  </t-space>
 </template>
 <script setup>
 const handleClick = (data, { e }) => {