docs: use a-space replace br in demo (#6861)

components/badge/demo/ribbon.vue

@@ -16,6 +16,7 @@ Use ribbon badge.
 </docs>
 
 <template>
+  <a-space direction="vertical" style="width: 100%">
     <a-badge-ribbon text="Hippies">
       <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
     </a-badge-ribbon>
@@ -40,4 +41,5 @@ Use ribbon badge.
     <a-badge-ribbon text="Hippies" color="magenta">
       <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
     </a-badge-ribbon>
+  </a-space>
 </template>

components/badge/demo/status.vue

@@ -22,13 +22,12 @@ Standalone badge with status.
   <a-badge status="processing" />
   <a-badge status="warning" />
   <br />
+
+  <a-space direction="vertical">
     <a-badge status="success" text="Success" />
-  <br />
     <a-badge status="error" text="Error" />
-  <br />
     <a-badge status="default" text="Default" />
-  <br />
     <a-badge status="processing" text="Processing" />
-  <br />
     <a-badge status="warning" text="warning" />
+  </a-space>
 </template>

components/config-provider/demo/direction.vue

@@ -24,7 +24,7 @@ Components which support rtl direction are listed here, you can toggle the direc
   </a-radio-group>
   <a-divider />
   <a-config-provider :direction="state.direction">
-    <div class="direction-components">
+    <a-space direction="vertical" class="direction-components">
       <a-row>
         <a-col :span="24">
           <a-divider orientation="left">Cascader example</a-divider>
@@ -48,20 +48,17 @@ Components which support rtl direction are listed here, you can toggle the direc
           </a-cascader>
         </a-col>
       </a-row>
-      <br />
       <a-row>
         <a-col :span="12">
           <a-divider orientation="left">Switch example</a-divider>
-          &nbsp;&nbsp;
+          <a-space>
             <a-switch default-checked />
-          &nbsp;&nbsp;
             <a-switch loading default-checked />
-          &nbsp;&nbsp;
             <a-switch size="small" loading />
+          </a-space>
         </a-col>
         <a-col :span="12">
           <a-divider orientation="left">Radio Group example</a-divider>
-
           <a-radio-group default-value="c" button-style="solid">
             <a-radio-button value="a">تهران</a-radio-button>
             <a-radio-button value="b" disabled>اصفهان</a-radio-button>
@@ -70,7 +67,6 @@ Components which support rtl direction are listed here, you can toggle the direc
           </a-radio-group>
         </a-col>
       </a-row>
-      <br />
       <a-row>
         <a-col :span="12">
           <a-divider orientation="left">Button example</a-divider>
@@ -124,10 +120,10 @@ Components which support rtl direction are listed here, you can toggle the direc
           </a-tree>
         </a-col>
       </a-row>
-      <br />
       <a-row>
         <a-col :span="24">
           <a-divider orientation="left">Input (Input Group) example</a-divider>
+          <a-space direction="vertical" style="width: 100%">
             <a-input-group size="large">
               <a-row :gutter="8">
                 <a-col :span="5">
@@ -138,12 +134,10 @@ Components which support rtl direction are listed here, you can toggle the direc
                 </a-col>
               </a-row>
             </a-input-group>
-          <br />
             <a-input-group compact>
               <a-input style="width: 20%" default-value="0571" />
               <a-input style="width: 30%" default-value="26888888" />
             </a-input-group>
-          <br />
             <a-input-group compact>
               <a-select default-value="Option1">
                 <a-select-option value="Option1">Option1</a-select-option>
@@ -152,10 +146,7 @@ Components which support rtl direction are listed here, you can toggle the direc
               <a-input style="width: 50%" default-value="input content" />
               <a-inputNumber />
             </a-input-group>
-          <br />
             <a-input-search placeholder="input search text" enter-button="Search" size="large" />
-          <br />
-          <br />
             <div style="margin-bottom: 16px">
               <a-input default-value="mysite">
                 <template #selectBefore>
@@ -174,10 +165,10 @@ Components which support rtl direction are listed here, you can toggle the direc
                 </template>
               </a-input>
             </div>
-          <br />
             <a-row>
               <a-col :span="12">
                 <a-divider orientation="left">Select example</a-divider>
+                <a-space wrap>
                   <a-select mode="multiple" default-value="مورچه" style="width: 120px">
                     <a-select-option value="jack">Jack</a-select-option>
                     <a-select-option value="مورچه">مورچه</a-select-option>
@@ -204,6 +195,7 @@ Components which support rtl direction are listed here, you can toggle the direc
                     <a-select-option value="سعید">سعید</a-select-option>
                     <a-select-option value="tom">Tom</a-select-option>
                   </a-select>
+                </a-space>
               </a-col>
               <a-col :span="12">
                 <a-divider orientation="left">TreeSelect example</a-divider>
@@ -220,7 +212,6 @@ Components which support rtl direction are listed here, you can toggle the direc
                 </div>
               </a-col>
             </a-row>
-          <br />
             <a-row>
               <a-col :span="24">
                 <a-divider orientation="left">Modal example</a-divider>
@@ -234,7 +225,6 @@ Components which support rtl direction are listed here, you can toggle the direc
                 </div>
               </a-col>
             </a-row>
-          <br />
             <a-row>
               <a-col :span="24">
                 <a-divider orientation="left">Steps example</a-divider>
@@ -279,7 +269,6 @@ Components which support rtl direction are listed here, you can toggle the direc
                 </div>
               </a-col>
             </a-row>
-          <br />
             <a-row>
               <a-col :span="12">
                 <a-divider orientation="left">Rate example</a-divider>
@@ -315,18 +304,15 @@ Components which support rtl direction are listed here, you can toggle the direc
                 </div>
               </a-col>
             </a-row>
+          </a-space>
         </a-col>
       </a-row>
-
-      <br />
-      <br />
       <a-row>
         <a-col :span="24">
           <a-divider orientation="left">Pagination example</a-divider>
           <a-pagination show-size-changer :default-current="3" :total="500" />
         </a-col>
       </a-row>
-      <br />
       <a-row>
         <a-col :span="24">
           <a-divider orientation="left">Grid System example</a-divider>
@@ -355,7 +341,7 @@ Components which support rtl direction are listed here, you can toggle the direc
           </div>
         </a-col>
       </a-row>
-    </div>
+    </a-space>
   </a-config-provider>
 </template>
 <script lang="ts" setup>
@@ -538,6 +524,7 @@ const rateValue = ref(2);
 </script>
 <style lang="less" scoped>
 .direction-components {
+  width: 100%;
   .button-demo .ant-btn,
   .button-demo .ant-btn-group {
     margin-right: 8px;

components/input/demo/group.vue

@@ -18,7 +18,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
 
 </docs>
 <template>
-  <div class="site-input-group-wrapper">
+  <a-space class="site-input-group-wrapper" direction="vertical" size="middle">
     <a-input-group size="large">
       <a-row :gutter="8">
         <a-col :span="5">
@@ -29,12 +29,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         </a-col>
       </a-row>
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-input v-model:value="value1" style="width: 20%" />
       <a-input v-model:value="value2" style="width: 30%" />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value3">
         <a-select-option value="Zhejiang">Zhejiang</a-select-option>
@@ -42,7 +40,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
       </a-select>
       <a-input v-model:value="value4" style="width: 50%" />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value5">
         <a-select-option value="Option1">Option1</a-select-option>
@@ -50,12 +47,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
       </a-select>
       <a-input v-model:value="value6" style="width: 50%" />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-input v-model:value="value7" style="width: 50%" />
       <a-date-picker v-model:value="value8" style="width: 50%" />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value9">
         <a-select-option value="Option1-1">Option1-1</a-select-option>
@@ -66,7 +61,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         <a-select-option value="Option2-2">Option2-2</a-select-option>
       </a-select>
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value11">
         <a-select-option value="1">Between</a-select-option>
@@ -91,7 +85,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         placeholder="Maximum"
       />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value15">
         <a-select-option value="Sign Up">Sign Up</a-select-option>
@@ -104,7 +97,6 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         placeholder="Email"
       />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-select v-model:value="value17" style="width: 30%">
         <a-select-option value="Home">Home</a-select-option>
@@ -117,12 +109,10 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         placeholder="Select Address"
       />
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-input v-model:value="value19" style="width: calc(100% - 200px)" />
       <a-button type="primary">Submit</a-button>
     </a-input-group>
-    <br />
     <a-input-group compact>
       <a-input v-model:value="value20" style="width: calc(100% - 200px)" />
       <a-tooltip title="copy git url">
@@ -131,7 +121,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
         </a-button>
       </a-tooltip>
     </a-input-group>
-  </div>
+  </a-space>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';

components/input/demo/presuffix.vue

@@ -19,7 +19,7 @@ Add prefix or suffix icons inside input.
   <div class="components-input-demo-presuffix">
     <a-input v-model:value="userName" placeholder="Basic usage">
       <template #prefix>
-        <user-outlined type="user" />
+        <user-outlined />
       </template>
       <template #suffix>
         <a-tooltip title="Extra information">

components/progress/demo/steps.vue

@@ -17,11 +17,10 @@ A progress bar with steps.
 </docs>
 
 <template>
+  <a-space direction="vertical" style="width: 100%">
     <a-progress :percent="50" :steps="3" />
-  <br />
     <a-progress :percent="30" :steps="5" />
-  <br />
     <a-progress :percent="100" :steps="5" size="small" stroke-color="#52c41a" />
-  <br />
     <a-progress :percent="60" :steps="5" :stroke-color="['#52c41a', '#52c41a', '#f5222d']" />
+  </a-space>
 </template>

components/space/demo/compact.vue

@@ -17,22 +17,19 @@ Compact Mode for form component.
 </docs>
 
 <template>
-  <div class="site-space-compact-wrapper">
+  <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
     <a-space-compact block>
       <a-input :style="{ width: '20%' }" default-value="0571" />
       <a-input :style="{ width: '30%' }" default-value="26888888" />
     </a-space-compact>
-    <br />
     <a-space-compact block size="small">
       <a-input :style="{ width: 'calc(100% - 200px)' }" default-value="https://ant.design" />
       <a-button type="primary">Submit</a-button>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input :style="{ width: 'calc(100% - 200px)' }" default-value="https://ant.design" />
       <a-button type="primary">Submit</a-button>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input
         :style="{ width: 'calc(100% - 200px)' }"
@@ -44,7 +41,6 @@ Compact Mode for form component.
         </a-button>
       </a-tooltip>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="Zhejiang" allow-clear>
         <a-select-option value="Zhejiang">Zhejiang</a-select-option>
@@ -52,7 +48,6 @@ Compact Mode for form component.
       </a-select>
       <a-input :style="{ width: '50%' }" default-value="Xihu District, Hangzhou" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select allow-clear mode="multiple" default-value="Zhejianggggg" :style="{ width: '50%' }">
         <a-select-option value="Zhejianggggg">Zhejianggggg</a-select-option>
@@ -60,13 +55,11 @@ Compact Mode for form component.
       </a-select>
       <a-input :style="{ width: '50%' }" default-value="Xihu District, Hangzhou" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input-search :style="{ width: '30%' }" default-value="0571" />
       <a-input-search allow-clear :style="{ width: '50%' }" default-value="26888888" />
       <a-input-search :style="{ width: '20%' }" default-value="+1" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="Option1">
         <a-select-option value="Option1">Option1</a-select-option>
@@ -75,23 +68,19 @@ Compact Mode for form component.
       <a-input :style="{ width: '50%' }" default-value="input content" />
       <a-input-number :default-value="12" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input :style="{ width: '50%' }" default-value="input content" />
       <a-date-picker :style="{ width: '50%' }" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-range-picker :style="{ width: '70%' }" />
       <a-input :style="{ width: '30%' }" default-value="input content" />
       <a-button type="primary">查询</a-button>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-input :style="{ width: '30%' }" default-value="input content" />
       <a-range-picker :style="{ width: '70%' }" />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="Option1-1">
         <a-select-option value="Option1-1">Option1-1</a-select-option>
@@ -102,7 +91,6 @@ Compact Mode for form component.
         <a-select-option value="Option2-2">Option2-2</a-select-option>
       </a-select>
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="1">
         <a-select-option value="1">Between</a-select-option>
@@ -129,7 +117,6 @@ Compact Mode for form component.
         placeholder="Maximum"
       />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-select default-value="Sign Up" :style="{ width: '30%' }">
         <a-select-option value="Sign Up">Sign Up</a-select-option>
@@ -141,7 +128,6 @@ Compact Mode for form component.
         :options="[{ value: 'text 1' }, { value: 'text 2' }]"
       />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-time-picker :style="{ width: '70%' }" />
       <a-cascader
@@ -183,7 +169,6 @@ Compact Mode for form component.
         placeholder="Select Address"
       />
     </a-space-compact>
-    <br />
     <a-space-compact block>
       <a-time-range-picker />
       <a-tree-select
@@ -198,8 +183,7 @@ Compact Mode for form component.
       ></a-tree-select>
       <a-button type="primary">Submit</a-button>
     </a-space-compact>
-    <br />
+  </a-space>
-  </div>
 </template>
 
 <script lang="ts" setup>