doc: update demo

Author: tangjinzhou

components/config-provider/demo/size.vue

@@ -94,3 +94,8 @@ export default defineComponent({
   },
 });
 </script>
+<style scoped>
+.example {
+  margin: 16px 0;
+}
+</style>

components/message/__tests__/__snapshots__/demo.test.js.snap

@@ -25,13 +25,20 @@ exports[`renders ./components/message/demo/loading.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/message/demo/other.vue correctly 1`] = `
-<div><button class="ant-btn" type="button">
-    <!----><span>Success</span>
-  </button><button class="ant-btn" type="button">
-    <!----><span>Error</span>
-  </button><button class="ant-btn" type="button">
-    <!----><span>Warning</span>
-  </button></div>
+<div class="ant-space ant-space-horizontal ant-space-align-center">
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn" type="button">
+      <!----><span>Success</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item" style="margin-right: 8px;"><button class="ant-btn" type="button">
+      <!----><span>Error</span>
+    </button></div>
+  <!---->
+  <div class="ant-space-item"><button class="ant-btn" type="button">
+      <!----><span>Warning</span>
+    </button></div>
+  <!---->
+</div>
 `;
 
 exports[`renders ./components/message/demo/thenable.vue correctly 1`] = `

components/message/demo/other.vue

@@ -17,11 +17,11 @@ Messages of success, error and warning types.
 </docs>
 
 <template>
-  <div>
+  <a-space>
     <a-button @click="success">Success</a-button>
     <a-button @click="error">Error</a-button>
     <a-button @click="warning">Warning</a-button>
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import { message } from 'ant-design-vue';

components/time-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -17,11 +17,11 @@ TimePicker of 12 hours format, with default format `h:mm:ss a`.
 </docs>
 
 <template>
-  <div>
+  <a-space direction="vertical">
     <a-time-picker v-model:value="value" use12-hours />
     <a-time-picker v-model:value="value" use12-hours format="h:mm:ss A" style="width: 140px" />
     <a-time-picker v-model:value="value" use12-hours format="h:mm a" />
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import { Dayjs } from 'dayjs';

components/time-picker/demo/12hours.vue

@@ -17,7 +17,7 @@ Render addon contents to timepicker panel's bottom.
 </docs>
 
 <template>
-  <div>
+  <a-space direction="vertical">
     <a-time-picker v-model:value="value" v-model:open="open" @openChange="handleOpenChange">
       <template #renderExtraFooter="{ prefixCls }">
         <a-button size="small" type="primary" @click="handleClose">OK {{ prefixCls }}</a-button>
@@ -28,7 +28,7 @@ Render addon contents to timepicker panel's bottom.
         <a-button size="small" type="primary" @click="handleClose">OK</a-button>
       </template>
     </a-time-picker>
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import { Dayjs } from 'dayjs';

components/time-picker/demo/addon.vue

@@ -17,8 +17,10 @@ Click `TimePicker`, and then we could select or input a time in panel.
 </docs>
 
 <template>
-  <a-time-picker v-model:value="value" />
-  <a-time-picker v-model:value="strValue" value-format="HH:mm:ss" />
+  <a-space direction="vertical">
+    <a-time-picker v-model:value="value" />
+    <a-time-picker v-model:value="strValue" value-format="HH:mm:ss" />
+  </a-space>
 </template>
 <script lang="ts">
 import dayjs, { Dayjs } from 'dayjs';

components/time-picker/demo/basic.vue

@@ -17,6 +17,8 @@ Bordered-less style component.
 </docs>
 
 <template>
-  <a-time-picker :bordered="false" />
-  <a-time-range-picker :bordered="false" />
+  <a-space direction="vertical">
+    <a-time-picker :bordered="false" />
+    <a-time-range-picker :bordered="false" />
+  </a-space>
 </template>

components/time-picker/demo/bordered.vue

@@ -17,11 +17,11 @@ The input box comes in three sizes. large is used in the form, while the medium
 </docs>
 
 <template>
-  <div>
+  <a-space direction="vertical">
     <a-time-picker v-model:value="value1" size="large" />
     <a-time-picker v-model:value="value2" />
     <a-time-picker v-model:value="value3" size="small" />
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import dayjs from 'dayjs';

components/time-picker/demo/size.vue

@@ -18,18 +18,14 @@ value 和 onChange 需要配合使用。也可以直接使用v-model。
 </docs>
 
 <template>
-  <div>
+  <a-space direction="vertical">
     <p>use value and @change</p>
     <a-time-picker :value="value" @change="onChange" />
-    <br />
-    <br />
     <p>v-model</p>
     <a-time-picker v-model:value="value" />
-    <br />
-    <br />
     <p>Do not change</p>
     <a-time-picker :value="value2" />
-  </div>
+  </a-space>
 </template>
 <script lang="ts">
 import dayjs, { Dayjs } from 'dayjs';