chore: Avatar & Badge & Calendar & Card & Collapse example replace wi…

…th t-space (#1655) * docs(avatar): example space * docs(badge): example space * docs(calendar): example space * docs(card): example space * docs(collapse): example space
Tencent · Sep 13, 2022 · a73d80b · a73d80b
1 parent b716d6e
commit a73d80b
Show file tree

Hide file tree

Showing 40 changed files with 12,987 additions and 12,160 deletions.
diff --git a/src/avatar/_example/adjust.vue b/src/avatar/_example/adjust.vue
@@ -1,15 +1,7 @@
 <template>
-  <div class="demo-avatar">
+  <t-space :size="40">
     <t-avatar>王</t-avatar>
     <t-avatar>王亿</t-avatar>
     <t-avatar>王亿亿</t-avatar>
-  </div>
+  </t-space>
 </template>
-
-<style lang="less" scoped>
-.demo-avatar {
-  .t-avatar {
-    margin-right: 40px;
-  }
-}
-</style>
diff --git a/src/avatar/_example/base.vue b/src/avatar/_example/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo-avatar">
+  <t-space :size="40">
     <t-avatar :image="image" :hide-on-load-failed="false" />
     <t-avatar>W</t-avatar>
     <t-avatar :icon="icon" />
@@ -8,7 +8,7 @@
         <user-icon />
       </template>
     </t-avatar>
-  </div>
+  </t-space>
 </template>
 <script setup lang="jsx">
 import { computed } from 'vue';
@@ -17,10 +17,3 @@ import { UserIcon } from 'tdesign-icons-vue-next';
 const icon = computed(() => () => <UserIcon />);
 const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
 </script>
-<style lang="less" scoped>
-.demo-avatar {
-  .t-avatar {
-    margin-right: 40px;
-  }
-}
-</style>
diff --git a/src/avatar/_example/group-cascading.vue b/src/avatar/_example/group-cascading.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo-avatar">
+  <t-space direction="vertical" :size="40">
     <div class="demo-avatar-block">
       <t-avatar-group>
         <t-avatar :image="image" />
@@ -15,19 +15,11 @@
         <t-avatar :icon="icon" />
       </t-avatar-group>
     </div>
-  </div>
+  </t-space>
 </template>
 <script setup lang="jsx">
-import { computed } from 'vue';
 import { UserIcon } from 'tdesign-icons-vue-next';
 
-const icon = computed(() => () => <UserIcon />);
+const icon = () => <UserIcon />;
 const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
 </script>
-<style lang="less" scoped>
-.demo-avatar {
-  .demo-avatar-block:first-child {
-    margin-bottom: 40px;
-  }
-}
-</style>
diff --git a/src/avatar/_example/group-max.vue b/src/avatar/_example/group-max.vue
@@ -1,27 +1,23 @@
 <template>
-  <div class="demo-avatar">
-    <div class="demo-avatar-block">
-      <t-avatar-group size="large" :max="2">
-        <t-avatar :image="image" />
-        <t-avatar>Avatar</t-avatar>
-        <t-avatar :image="image" />
-      </t-avatar-group>
-    </div>
-    <div class="demo-avatar-block">
-      <t-avatar-group size="large" :max="2" :collapse-avatar="ellipsisIcon">
-        <t-avatar :image="image" />
-        <t-avatar>Avatar</t-avatar>
-        <t-avatar :icon="icon" />
-      </t-avatar-group>
-    </div>
-    <div class="demo-avatar-block">
-      <t-avatar-group size="large" :max="2" collapse-avatar="more">
-        <t-avatar :image="image" />
-        <t-avatar>Avatar</t-avatar>
-        <t-avatar :icon="icon" />
-      </t-avatar-group>
-    </div>
-  </div>
+  <t-space direction="vertical" :size="40">
+    <t-avatar-group size="large" :max="2">
+      <t-avatar :image="image" />
+      <t-avatar>Avatar</t-avatar>
+      <t-avatar :image="image" />
+    </t-avatar-group>
+
+    <t-avatar-group size="large" :max="2" :collapse-avatar="ellipsisIcon">
+      <t-avatar :image="image" />
+      <t-avatar>Avatar</t-avatar>
+      <t-avatar :icon="icon" />
+    </t-avatar-group>
+
+    <t-avatar-group size="large" :max="2" collapse-avatar="more">
+      <t-avatar :image="image" />
+      <t-avatar>Avatar</t-avatar>
+      <t-avatar :icon="icon" />
+    </t-avatar-group>
+  </t-space>
 </template>
 <script setup lang="jsx">
 import { UserIcon, EllipsisIcon } from 'tdesign-icons-vue-next';
@@ -30,10 +26,3 @@ const icon = () => <UserIcon />;
 const ellipsisIcon = () => <EllipsisIcon />;
 const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
 </script>
-<style lang="less" scoped>
-.demo-avatar {
-  &-block:not(:last-child) {
-    margin-bottom: 40px;
-  }
-}
-</style>
diff --git a/src/avatar/_example/group.vue b/src/avatar/_example/group.vue
@@ -1,20 +1,17 @@
 <template>
-  <div class="demo-avatar">
-    <div class="demo-avatar-block">
-      <t-avatar-group>
-        <t-avatar :image="image" />
-        <t-avatar>W</t-avatar>
-        <t-avatar :icon="icon" />
-      </t-avatar-group>
-    </div>
-    <div class="demo-avatar-block">
-      <t-avatar-group size="large">
-        <t-avatar :image="image" />
-        <t-avatar>W</t-avatar>
-        <t-avatar :icon="icon" />
-      </t-avatar-group>
-    </div>
-  </div>
+  <t-space class="demo-avatar" direction="vertical" :size="40">
+    <t-avatar-group>
+      <t-avatar :image="image" />
+      <t-avatar>W</t-avatar>
+      <t-avatar :icon="icon" />
+    </t-avatar-group>
+
+    <t-avatar-group size="large">
+      <t-avatar :image="image" />
+      <t-avatar>W</t-avatar>
+      <t-avatar :icon="icon" />
+    </t-avatar-group>
+  </t-space>
 </template>
 <script setup lang="jsx">
 import { UserIcon } from 'tdesign-icons-vue-next';
@@ -24,9 +21,6 @@ const image = 'https://tdesign.gtimg.com/site/avatar.jpg';
 </script>
 <style lang="less" scoped>
 .demo-avatar {
-  .demo-avatar-block:not(:last-child) {
-    margin-bottom: 40px;
-  }
   .t-avatar {
     margin-right: 40px;
   }

diff --git a/src/avatar/_example/shape.vue b/src/avatar/_example/shape.vue
@@ -1,14 +1,6 @@
 <template>
-  <div class="demo-avatar">
+  <t-space :size="40">
     <t-avatar>W</t-avatar>
     <t-avatar shape="round"> W </t-avatar>
-  </div>
+  </t-space>
 </template>
-
-<style lang="less" scoped>
-.demo-avatar {
-  .t-avatar {
-    margin-right: 40px;
-  }
-}
-</style>
diff --git a/src/avatar/_example/size.vue b/src/avatar/_example/size.vue
@@ -1,27 +1,17 @@
 <template>
-  <div class="demo-avatar">
-    <div class="demo-avatar-block">
+  <t-space direction="vertical" :size="40">
+    <t-space :size="40">
       <t-avatar size="small"> W </t-avatar>
       <t-avatar size="medium"> W </t-avatar>
       <t-avatar size="large"> W </t-avatar>
       <t-avatar size="100px"> W </t-avatar>
-    </div>
-    <div class="demo-avatar-block">
+    </t-space>
+
+    <t-space :size="40">
       <t-avatar shape="round" size="small"> W </t-avatar>
       <t-avatar shape="round" size="medium"> W </t-avatar>
       <t-avatar shape="round" size="large"> W </t-avatar>
       <t-avatar shape="round" size="100px"> W </t-avatar>
-    </div>
-  </div>
+    </t-space>
+  </t-space>
 </template>
-
-<style lang="less" scoped>
-.demo-avatar {
-  .demo-avatar-block:first-child {
-    margin-bottom: 40px;
-  }
-  .t-avatar {
-    margin-right: 40px;
-  }
-}
-</style>
diff --git a/src/badge/_example/base.vue b/src/badge/_example/base.vue
@@ -1,37 +1,20 @@
 <template>
-  <div>
-    <div class="demo-badge-block">
-      <t-badge dot>
-        <div class="badge-block" />
-      </t-badge>
-      <t-badge dot> 解锁新徽章 </t-badge>
-      <t-badge dot>
-        <svg
-          class="t-icon"
-          viewBox="0 0 16 16"
-          version="1.1"
-          xmlns="http://www.w3.org/2000/svg"
-          style="font-size: 24px"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M8,9 C9.40504021,9 10.7254812,9.36221239 11.8730402,9.99835445 L11.885,10 L12.4565011,10.2862457 C12.7901689,10.4574447 13,10.8009441 13,11.1759685 L13,13 C13,13.5522847 12.5522847,14 12,14 L4,14 C3.44771525,14 3,13.5522847 3,13 L3,11.1762791 C3,10.8012353 3.20985249,10.4577217 3.54354665,10.2865317 L4.121,10 L4.126,9.999 L4.27379497,9.91895294 C5.38659871,9.3321599 6.6545093,9 8,9 Z M8,10 C6.51283435,10 5.13398645,10.4637634 4.00018867,11.2545577 L4,13 L12,13 L12.0003287,11.2549186 C10.8664331,10.4639045 9.48739188,10 8,10 Z M8,2.49576492 C9.65685425,2.49576492 11,3.83891067 11,5.49576492 C11,7.15261916 9.65685425,8.49576492 8,8.49576492 C6.34314575,8.49576492 5,7.15261916 5,5.49576492 C5,3.83891067 6.34314575,2.49576492 8,2.49576492 Z M8,3.49576492 C6.8954305,3.49576492 6,4.39119542 6,5.49576492 C6,6.60033441 6.8954305,7.49576492 8,7.49576492 C9.1045695,7.49576492 10,6.60033441 10,5.49576492 C10,4.39119542 9.1045695,3.49576492 8,3.49576492 Z"
-          />
-        </svg>
-      </t-badge>
-    </div>
-  </div>
+  <t-space align="center" size="large">
+    <t-badge dot>
+      <div class="badge-block" />
+    </t-badge>
+    <t-badge dot> 解锁新徽章 </t-badge>
+    <t-badge dot>
+      <user-icon size="24" />
+    </t-badge>
+  </t-space>
 </template>
 
-<style>
-.demo-t-badge-title {
-  margin: 20px 0;
-}
+<script setup lang="jsx">
+import { UserIcon } from 'tdesign-icons-vue-next';
+</script>
 
-.demo-badge-block {
-  display: flex;
-  align-items: center;
-}
+<style>
 .badge-block {
   width: 40px;
   height: 40px;
@@ -40,8 +23,4 @@
   box-sizing: border-box;
   border-radius: 3px;
 }
-
-.tbadge-block + .t-badge {
-  margin-left: 32px;
-}
 </style>
diff --git a/src/badge/_example/custom.vue b/src/badge/_example/custom.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <t-space size="large">
     <t-badge count="2" dot>
       <div class="badge-block"></div>
     </t-badge>
@@ -12,7 +12,7 @@
     <t-badge count="100" color="#0052D9" shape="round">
       <div class="badge-block"></div>
     </t-badge>
-  </div>
+  </t-space>
 </template>
 <style scoped>
 .badge-block {
@@ -23,8 +23,4 @@
   box-sizing: border-box;
   border-radius: 3px;
 }
-
-.t-badge + .t-badge {
-  margin-left: 32px;
-}
 </style>
diff --git a/src/badge/_example/number.vue b/src/badge/_example/number.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <t-space size="large">
     <t-badge :count="2">
       <div class="badge-block" />
     </t-badge>
@@ -9,7 +9,7 @@
     <t-badge :count="100">
       <div class="badge-block" />
     </t-badge>
-  </div>
+  </t-space>
 </template>
 
 <style>
@@ -21,8 +21,4 @@
   box-sizing: border-box;
   border-radius: 3px;
 }
-
-.badge-block + .badge-block {
-  margin-left: 16px;
-}
 </style>
diff --git a/src/badge/_example/offset.vue b/src/badge/_example/offset.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <t-space size="large">
     <t-badge count="2">
       <div class="badge-block" />
     </t-badge>
@@ -19,7 +19,7 @@
     <t-badge count="2" :offset="[10, -10]">
       <div class="badge-block" />
     </t-badge>
-  </div>
+  </t-space>
 </template>
 
 <style>
@@ -31,12 +31,4 @@
   box-sizing: border-box;
   border-radius: 3px;
 }
-
-.badge-block + .badge-block {
-  margin-left: 24px;
-}
-
-.badge-block + div {
-  margin-top: 8px;
-}
 </style>
diff --git a/src/badge/_example/shape.vue b/src/badge/_example/shape.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
+  <t-space size="large">
     <t-badge shape="circle" count="2">
       <div class="badge-block" />
     </t-badge>
     <t-badge shape="round" count="99">
       <div class="badge-block" />
     </t-badge>
-  </div>
+  </t-space>
 </template>
 
 <style>
@@ -18,8 +18,4 @@
   box-sizing: border-box;
   border-radius: 3px;
 }
-
-.badge-block + .badge-block {
-  margin-left: 16px;
-}
 </style>